<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>CSS Layout API Level 1</title>
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <meta content="ED" name="w3c-status">
  <link href="../default.css" rel="stylesheet" type="text/css">
  <link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon">
  <link href="https://www.w3.org/StyleSheets/TR/2016/W3C-ED" rel="stylesheet" type="text/css">
  <link href="https://www.w3.org/TR/css-layout-api-1/" rel="canonical">
<style>
/* Put nice boxes around each algorithm. */
[data-algorithm]:not(.heading) {
    padding: .5em;
    border: thin solid #ddd; border-radius: .5em;
    margin: .5em calc(-0.5em - 1px);
}
[data-algorithm]:not(.heading) > :first-child {
    margin-top: 0;
}
[data-algorithm]:not(.heading) > :last-child {
    margin-bottom: 0;
}
</style>
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-var-click-highlighting */

    var { cursor: pointer; }
    var.selected0 { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
    var.selected1 { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
    var.selected2 { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
    var.selected3 { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
    var.selected4 { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
    var.selected5 { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
    var.selected6 { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
    </style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
<style>/* style-dfn-panel */

.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: #DDDDDD;
    color: black;
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
<style>/* style-syntax-highlighting */
pre.idl.highlight { color: #708090; }
.highlight:not(.idl) { background: hsl(24, 20%, 95%); }
code.highlight { padding: .1em; border-radius: .3em; }
pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; }
c-[a] { color: #990055 } /* Keyword.Declaration */
c-[b] { color: #990055 } /* Keyword.Type */
c-[c] { color: #708090 } /* Comment */
c-[d] { color: #708090 } /* Comment.Multiline */
c-[e] { color: #0077aa } /* Name.Attribute */
c-[f] { color: #669900 } /* Name.Tag */
c-[g] { color: #222222 } /* Name.Variable */
c-[k] { color: #990055 } /* Keyword */
c-[l] { color: #000000 } /* Literal */
c-[m] { color: #000000 } /* Literal.Number */
c-[n] { color: #0077aa } /* Name */
c-[o] { color: #999999 } /* Operator */
c-[p] { color: #999999 } /* Punctuation */
c-[s] { color: #a67f59 } /* Literal.String */
c-[t] { color: #a67f59 } /* Literal.String.Single */
c-[u] { color: #a67f59 } /* Literal.String.Double */
c-[cp] { color: #708090 } /* Comment.Preproc */
c-[c1] { color: #708090 } /* Comment.Single */
c-[cs] { color: #708090 } /* Comment.Special */
c-[kc] { color: #990055 } /* Keyword.Constant */
c-[kn] { color: #990055 } /* Keyword.Namespace */
c-[kp] { color: #990055 } /* Keyword.Pseudo */
c-[kr] { color: #990055 } /* Keyword.Reserved */
c-[ld] { color: #000000 } /* Literal.Date */
c-[nc] { color: #0077aa } /* Name.Class */
c-[no] { color: #0077aa } /* Name.Constant */
c-[nd] { color: #0077aa } /* Name.Decorator */
c-[ni] { color: #0077aa } /* Name.Entity */
c-[ne] { color: #0077aa } /* Name.Exception */
c-[nf] { color: #0077aa } /* Name.Function */
c-[nl] { color: #0077aa } /* Name.Label */
c-[nn] { color: #0077aa } /* Name.Namespace */
c-[py] { color: #0077aa } /* Name.Property */
c-[ow] { color: #999999 } /* Operator.Word */
c-[mb] { color: #000000 } /* Literal.Number.Bin */
c-[mf] { color: #000000 } /* Literal.Number.Float */
c-[mh] { color: #000000 } /* Literal.Number.Hex */
c-[mi] { color: #000000 } /* Literal.Number.Integer */
c-[mo] { color: #000000 } /* Literal.Number.Oct */
c-[sb] { color: #a67f59 } /* Literal.String.Backtick */
c-[sc] { color: #a67f59 } /* Literal.String.Char */
c-[sd] { color: #a67f59 } /* Literal.String.Doc */
c-[se] { color: #a67f59 } /* Literal.String.Escape */
c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */
c-[si] { color: #a67f59 } /* Literal.String.Interpol */
c-[sx] { color: #a67f59 } /* Literal.String.Other */
c-[sr] { color: #a67f59 } /* Literal.String.Regex */
c-[ss] { color: #a67f59 } /* Literal.String.Symbol */
c-[vc] { color: #0077aa } /* Name.Variable.Class */
c-[vg] { color: #0077aa } /* Name.Variable.Global */
c-[vi] { color: #0077aa } /* Name.Variable.Instance */
c-[il] { color: #000000 } /* Literal.Number.Integer.Long */
</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"><a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" width="72"> </a> </p>
   <h1 class="p-name no-ref" id="title">CSS Layout API Level 1</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   <div data-fill-with="spec-metadata">
    <dl>
     <dt>This version:
     <dd><a class="u-url" href="https://drafts.css-houdini.org/css-layout-api-1/">https://drafts.css-houdini.org/css-layout-api-1/</a>
     <dt>Latest published version:
     <dd><a href="https://www.w3.org/TR/css-layout-api-1/">https://www.w3.org/TR/css-layout-api-1/</a>
     <dt>Feedback:
     <dd><span><a href="mailto:public-houdini@w3.org?subject=%5Bcss-layout-api%5D%20YOUR%20TOPIC%20HERE">public-houdini@w3.org</a> with subject line “<kbd>[css-layout-api] <i data-lt>… message topic …</i></kbd>” (<a href="http://lists.w3.org/Archives/Public/public-houdini/" rel="discussion">archives</a>)</span>
     <dt class="editor">Editors:
     <dd class="editor p-author h-card vcard" data-editor-id="69511"><a class="p-name fn u-email email" href="mailto:gwhit@microsoft.com">Greg Whitworth</a>
     <dd class="editor p-author h-card vcard" data-editor-id="73001"><a class="p-name fn u-email email" href="mailto:ikilpatrick@chromium.org">Ian Kilpatrick</a>
     <dd class="editor p-author h-card vcard" data-editor-id="42199"><a class="p-name fn u-url url" href="http://xanthir.com/contact/">Tab Atkins-Bittner</a> (<span class="p-org org">Google</span>)
     <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:robert@ocallahan.org">Robert O'Callahan</a>
     <dd class="editor p-author h-card vcard" data-editor-id="49885"><a class="p-name fn u-email email" href="mailto:rossen.atanassov@microsoft.com">Rossen Atanassov</a>
     <dt class="editor">Former Editor:
     <dd class="editor p-author h-card vcard" data-editor-id="47691"><a class="p-name fn u-email email" href="mailto:shanestephens@google.com">Shane Stephens</a>
     <dt>Issue Tracking:
     <dd><a href="https://github.com/w3c/css-houdini-drafts/labels/css-layout-api-1">GitHub Issues</a>
    </dl>
   </div>
   <div data-fill-with="warning"></div>
   <p class="copyright" data-fill-with="copyright"><a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 1970 <a href="https://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="https://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="https://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="https://www.keio.ac.jp/">Keio</a>, <a href="https://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/copyright-documents">document use</a> rules apply. </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>An API for allowing web developers to define their own layout modes with javascript.

    See <a href="https://github.com/w3c/css-houdini-drafts/blob/master/css-layout-api/EXPLAINER.md">EXPLAINER</a>.</p>
  </div>
  <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2>
  <div data-fill-with="status">
   <p> This is a public copy of the editors’ draft.
	It is provided for discussion only and may change at any moment.
	Its publication here does not imply endorsement of its contents by W3C.
	Don’t cite this document other than as work in progress. </p>
   <p> <a href="https://github.com/w3c/css-houdini-drafts/issues">GitHub Issues</a> are preferred for discussion of this specification.
	When filing an issue, please put the text “css-layout-api” in the title,
	preferably like this:
	“[css-layout-api] <i>…summary of comment…</i>”.
	All issues and comments are <a href="https://lists.w3.org/Archives/Public/public-houdini-archive/">archived</a>. </p>
   <p> This document was produced by the <a href="http://www.w3.org/Style/CSS/members">CSS Working Group</a>. </p>
   <p> This document was produced by a group operating under
	the <a href="http://www.w3.org/Consortium/Patent-Policy/">W3C Patent Policy</a>.
	W3C maintains a <a href="http://www.w3.org/2004/01/pp-impl/32061/status" rel="disclosure">public list of any patent disclosures</a> made in connection with the deliverables of the group;
	that page also includes instructions for disclosing a patent.
	An individual who has actual knowledge of a patent which the individual believes contains <a href="http://www.w3.org/Consortium/Patent-Policy/#def-essential">Essential Claim(s)</a> must disclose the information in accordance with <a href="http://www.w3.org/Consortium/Patent-Policy/#sec-Disclosure">section 6 of the W3C Patent Policy</a>. </p>
   <p> This document is governed by the <a href="https://www.w3.org/2019/Process-20190301/" id="w3c_process_revision">1 March 2019 W3C Process Document</a>. </p>
   <p></p>
  </div>
  <div data-fill-with="at-risk"></div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li><a href="#intro"><span class="secno">1</span> <span class="content">Introduction</span></a>
    <li>
     <a href="#layout-api-containers"><span class="secno">2</span> <span class="content">Layout API Containers</span></a>
     <ol class="toc">
      <li><a href="#painting"><span class="secno">2.1</span> <span class="content">Layout API Container Painting</span></a>
      <li><a href="#layout-api-box-tree"><span class="secno">2.2</span> <span class="content">Box Tree Transformations</span></a>
     </ol>
    <li>
     <a href="#layout-worklet"><span class="secno">3</span> <span class="content">Layout Worklet</span></a>
     <ol class="toc">
      <li><a href="#concepts"><span class="secno">3.1</span> <span class="content">Concepts</span></a>
      <li><a href="#registering-layout"><span class="secno">3.2</span> <span class="content">Registering A Layout</span></a>
      <li><a href="#terminology"><span class="secno">3.3</span> <span class="content">Terminology</span></a>
     </ol>
    <li>
     <a href="#layout-api"><span class="secno">4</span> <span class="content">Layout API</span></a>
     <ol class="toc">
      <li>
       <a href="#layout-children"><span class="secno">4.1</span> <span class="content">Layout Children</span></a>
       <ol class="toc">
        <li><a href="#layout-child-box-tree"><span class="secno">4.1.1</span> <span class="content">LayoutChildren and the Box Tree</span></a>
       </ol>
      <li><a href="#layout-fragments"><span class="secno">4.2</span> <span class="content">Layout Fragments</span></a>
      <li><a href="#intrinsic-sizes"><span class="secno">4.3</span> <span class="content">Intrinsic Sizes</span></a>
      <li>
       <a href="#layout-constraints"><span class="secno">4.4</span> <span class="content">Layout Constraints</span></a>
       <ol class="toc">
        <li><a href="#layout-constraints-children"><span class="secno">4.4.1</span> <span class="content">Constraints for Layout Children</span></a>
       </ol>
      <li><a href="#breaking-and-fragmentation"><span class="secno">4.5</span> <span class="content">Breaking and Fragmentation</span></a>
      <li><a href="#edges"><span class="secno">4.6</span> <span class="content">Edges</span></a>
     </ol>
    <li>
     <a href="#interactions-with-other-modules"><span class="secno">5</span> <span class="content">Interactions with other Modules</span></a>
     <ol class="toc">
      <li>
       <a href="#interaction-sizing"><span class="secno">5.1</span> <span class="content">Sizing</span></a>
       <ol class="toc">
        <li><a href="#interaction-sizing-positiong-layout"><span class="secno">5.1.1</span> <span class="content">Positioned layout sizing</span></a>
       </ol>
      <li><a href="#interaction-positioning"><span class="secno">5.2</span> <span class="content">Positioning</span></a>
      <li><a href="#interaction-overflow"><span class="secno">5.3</span> <span class="content">Overflow</span></a>
      <li><a href="#interaction-fragmentation"><span class="secno">5.4</span> <span class="content">Fragmentation</span></a>
      <li><a href="#interaction-alignment"><span class="secno">5.5</span> <span class="content">Alignment</span></a>
     </ol>
    <li>
     <a href="#layout"><span class="secno">6</span> <span class="content">Layout</span></a>
     <ol class="toc">
      <li><a href="#processing-model"><span class="secno">6.1</span> <span class="content">Processing Model</span></a>
      <li>
       <a href="#performing-layout"><span class="secno">6.2</span> <span class="content">Performing Layout</span></a>
       <ol class="toc">
        <li><a href="#determining-intrinsic-sizes"><span class="secno">6.2.1</span> <span class="content">Determining Intrinsic Sizes</span></a>
        <li><a href="#generating-fragments"><span class="secno">6.2.2</span> <span class="content">Generating Fragments</span></a>
        <li><a href="#global-scope-selection"><span class="secno">6.2.3</span> <span class="content">Global Scope Selection</span></a>
        <li><a href="#utility-algorithms"><span class="secno">6.2.4</span> <span class="content">Utility Algorithms</span></a>
       </ol>
     </ol>
    <li><a href="#examples"><span class="secno">7</span> <span class="content">Examples</span></a>
    <li><a href="#security-considerations"><span class="secno">8</span> <span class="content">Security Considerations</span></a>
    <li><a href="#privacy-considerations"><span class="secno">9</span> <span class="content">Privacy Considerations</span></a>
    <li>
     <a href="#conformance"><span class="secno"></span> <span class="content"> Conformance</span></a>
     <ol class="toc">
      <li><a href="#conventions"><span class="secno"></span> <span class="content"> Document conventions</span></a>
      <li><a href="#conformance-classes"><span class="secno"></span> <span class="content"> Conformance classes</span></a>
      <li>
       <a href="#partial"><span class="secno"></span> <span class="content"> Partial implementations</span></a>
       <ol class="toc">
        <li><a href="#conform-future-proofing"><span class="secno"></span> <span class="content"> Implementations of Unstable and Proprietary Features</span></a>
       </ol>
      <li><a href="#testing"><span class="secno"></span> <span class="content"> Non-experimental implementations</span></a>
     </ol>
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
      <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
      <li><a href="#informative"><span class="secno"></span> <span class="content">Informative References</span></a>
     </ol>
    <li><a href="#idl-index"><span class="secno"></span> <span class="content">IDL Index</span></a>
   </ol>
  </nav>
  <main>
   <h2 class="heading settled" data-level="1" id="intro"><span class="secno">1. </span><span class="content">Introduction</span><a class="self-link" href="#intro"></a></h2>
   <p><em>This section is not normative.</em></p>
   <p>The layout stage of CSS is responsible for generating and positioning <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-3/#fragment" id="ref-for-fragment">fragments</a> from the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#box tree" id="ref-for-box tree">box
tree</a>.</p>
   <p>This specification describes an API which allows developers to layout a <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#box" id="ref-for-box">box</a> in response to
computed style and <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#box tree" id="ref-for-box tree①">box tree</a> changes.</p>
   <p>For a high level overview of this API, see the <a href="https://github.com/w3c/css-houdini-drafts/blob/master/css-layout-api/EXPLAINER.md">EXPLAINER</a>.</p>
   <h2 class="heading settled" data-level="2" id="layout-api-containers"><span class="secno">2. </span><span class="content">Layout API Containers</span><a class="self-link" href="#layout-api-containers"></a></h2>
   <p>A new <a href="https://www.w3.org/TR/css-values-3/#comb-one">alternative</a> value is added
to the <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-display-3/#typedef-display-inside" id="ref-for-typedef-display-inside" title="Expands to: flex | flow | grid | flow-root | table | ruby">&lt;display-inside></a> production: <code>layout(<a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-ident" id="ref-for-typedef-ident">&lt;ident></a>)</code>.</p>
   <dl>
    <dt><dfn class="dfn-paneled css" data-dfn-for="display" data-dfn-type="value" data-export id="valdef-display-layout">layout()</dfn> 
    <dd> This value causes an element to generate a <a data-link-type="dfn" href="#layout-api-container" id="ref-for-layout-api-container">layout API container</a> box. 
   </dl>
   <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="layout-api-container">layout API container</dfn> is the box generated by an element with a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-display-3/#typedef-display-inside" id="ref-for-typedef-display-inside①" title="Expands to: flex | flow | grid | flow-root | table | ruby">&lt;display-inside></a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#computed-value" id="ref-for-computed-value">computed value</a> <a class="css" data-link-type="maybe" href="#valdef-display-layout" id="ref-for-valdef-display-layout">layout()</a>.</p>
   <p>A <a data-link-type="dfn" href="#layout-api-container" id="ref-for-layout-api-container①">layout API container</a> establishes a new <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="layout-api-formatting-context">layout API formatting context</dfn> for its
contents. This is the same as establishing a block formatting context, except that the layout
provided by the author is used instead of the block layout.
For example, floats do not intrude into the layout API container, and the layout API container’s
margins do not collapse with the margins of its contents.</p>
   <p><a data-link-type="dfn" href="#layout-api-container" id="ref-for-layout-api-container②">Layout API containers</a> form a containing block for their contents <a href="https://www.w3.org/TR/CSS2/visudet.html#containing-block-details">exactly like block
containers do</a>. <a data-link-type="biblio" href="#biblio-css21">[CSS21]</a></p>
   <p class="note" role="note"><span>Note:</span> In a future level of the specification there may be a way to override the containing block
    behaviour.</p>
   <p>The <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow" id="ref-for-propdef-overflow">overflow</a> property applies to <a data-link-type="dfn" href="#layout-api-container" id="ref-for-layout-api-container③">layout API containers</a>. This is discussed in <a href="#interaction-overflow">§ 5.3 Overflow</a>.</p>
   <p>As the layout is entirely up to the author, properties which are used in other layout modes (e.g.
flex, block) may not apply. For example an author may not respect the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-margin" id="ref-for-propdef-margin">margin</a> property on children.</p>
   <div class="example" id="example-425e488b">
    <a class="self-link" href="#example-425e488b"></a> The HTML below shows an example of setting the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-shapes-2/#valdef-shape-inside-display" id="ref-for-valdef-shape-inside-display">display</a> to a <a class="css" data-link-type="maybe" href="#valdef-display-layout" id="ref-for-valdef-display-layout①">layout()</a> function, if the CSS
Layout API is supported. 
<pre class="lang-html highlight"><c- cp>&lt;!DOCTYPE html></c->
<c- p>&lt;</c-><c- f>style</c-><c- p>></c->
<c- p>@</c-><c- k>supports</c-> <c- o>(</c-><c- f>display</c-><c- o>:</c-> <c- f>layout</c-><c- o>(</c-><c- f>centering</c-><c- o>))</c-> <c- p>{</c->
  <c- p>.</c-><c- nc>centering-layout</c-> <c- p>{</c-> <c- k>display</c-><c- p>:</c-> <c- nf>layout</c-><c- p>(</c-><c- n>centering</c-><c- p>);</c-> <c- p>}</c->
<c- p>}</c->
<c- p>&lt;/</c-><c- f>style</c-><c- p>></c->
<c- p>&lt;</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>"centering-layout"</c-><c- p>>&lt;/</c-><c- f>div</c-><c- p>></c->
</pre>
   </div>
   <h3 class="heading settled" data-level="2.1" id="painting"><span class="secno">2.1. </span><span class="content">Layout API Container Painting</span><a class="self-link" href="#painting"></a></h3>
   <p><a data-link-type="dfn" href="#layout-api-container" id="ref-for-layout-api-container④">Layout API Container</a> children paint exactly the same as inline blocks <a data-link-type="biblio" href="#biblio-css21">[CSS21]</a>, except that
the order in which they are returned from the layout method (via <code class="idl"><a data-link-type="idl" href="#dom-fragmentresultoptions-childfragments" id="ref-for-dom-fragmentresultoptions-childfragments">childFragments</a></code>) is used in place of raw document order, and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-z-index" id="ref-for-propdef-z-index">z-index</a> values other than <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-position-3/#valdef-z-index-auto" id="ref-for-valdef-z-index-auto">auto</a> create a stacking context even if <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-position" id="ref-for-propdef-position">position</a> is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-position-3/#valdef-position-static" id="ref-for-valdef-position-static">static</a>.</p>
   <h3 class="heading settled" data-level="2.2" id="layout-api-box-tree"><span class="secno">2.2. </span><span class="content">Box Tree Transformations</span><a class="self-link" href="#layout-api-box-tree"></a></h3>
   <p>The inflow children of a <a data-link-type="dfn" href="#layout-api-container" id="ref-for-layout-api-container⑤">layout API container</a> can act in different ways depending on the value
of <a data-link-type="dfn" href="#document-layout-definition-layout-options" id="ref-for-document-layout-definition-layout-options">layout options'</a> <code class="idl"><a data-link-type="idl" href="#dom-layoutoptions-childdisplay" id="ref-for-dom-layoutoptions-childdisplay">childDisplay</a></code> (set by <code>layoutOptions</code> on the class).</p>
   <p>If the value of <a data-link-type="dfn" href="#document-layout-definition-layout-options" id="ref-for-document-layout-definition-layout-options①">layout options'</a> <code class="idl"><a data-link-type="idl" href="#dom-layoutoptions-childdisplay" id="ref-for-dom-layoutoptions-childdisplay①">childDisplay</a></code> is <code>"block"</code> the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-display-3/#propdef-display" id="ref-for-propdef-display">display</a> value of that child is <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#blockify" id="ref-for-blockify">blockified</a>. This is similar to
children of <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container">flex containers</a> or <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-container" id="ref-for-grid-container">grid containers</a>. See <a data-link-type="biblio" href="#biblio-css3-display">[css3-display]</a>.</p>
   <p>If the value of <a data-link-type="dfn" href="#document-layout-definition-layout-options" id="ref-for-document-layout-definition-layout-options②">layout options'</a> <code class="idl"><a data-link-type="idl" href="#dom-layoutoptions-childdisplay" id="ref-for-dom-layoutoptions-childdisplay②">childDisplay</a></code> is <code>"normal"</code>, no <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#blockify" id="ref-for-blockify①">blockification</a> occurs. Instead children with a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-display-3/#typedef-display-outside" id="ref-for-typedef-display-outside" title="Expands to: inline | run-in | block">&lt;display-outside></a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#computed-value" id="ref-for-computed-value①">computed value</a> of <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-display-3/#valdef-display-inline" id="ref-for-valdef-display-inline">inline</a> (a <a data-link-type="dfn" href="https://drafts.csswg.org/css-inline-3/#root-inline-box" id="ref-for-root-inline-box">root inline box</a>) will produce a single <code class="idl"><a data-link-type="idl" href="#layoutfragment" id="ref-for-layoutfragment">LayoutFragment</a></code> representing each line when <code class="idl"><a data-link-type="idl" href="#dom-layoutchild-layoutnextfragment" id="ref-for-dom-layoutchild-layoutnextfragment">layoutNextFragment()</a></code> is called.</p>
   <p class="note" role="note"><span>Note:</span> This allows authors to adjust the available inline size of each line, and position each line
    separately.</p>
   <p>Children of a <code class="idl"><a data-link-type="idl" href="#layoutchild" id="ref-for-layoutchild">LayoutChild</a></code> which represents <a data-link-type="dfn" href="https://drafts.csswg.org/css-inline-3/#root-inline-box" id="ref-for-root-inline-box①">root inline box</a> also have some additional
transformations.</p>
   <ul>
    <li data-md>
     <p>A <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#block-level" id="ref-for-block-level">block-level</a> box inside a <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#inline-level" id="ref-for-inline-level">inline-level</a> box is <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#inlinify" id="ref-for-inlinify">inlinified</a> I.e. its <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-display-3/#typedef-display-outside" id="ref-for-typedef-display-outside①" title="Expands to: inline | run-in | block">&lt;display-outside></a> is set to <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-display-3/#valdef-display-inline" id="ref-for-valdef-display-inline①">inline</a>.</p>
    <li data-md>
     <p>A <a data-link-type="dfn" href="https://drafts.csswg.org/css-page-floats-3/#float" id="ref-for-float">float</a> inside a <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#inline-level" id="ref-for-inline-level①">inline-level</a> box is not taken out of flow. Instead it must be treated as
 inflow, and be <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#inlinify" id="ref-for-inlinify①">inlinified</a>.</p>
   </ul>
   <p>In both of the above cases the children become <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#atomic-inline" id="ref-for-atomic-inline">atomic inlines</a>.</p>
   <p class="note" role="note"><span>Note:</span> User agents would not perform any "inline splitting" or fragmenting when they encounter a <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#block-level" id="ref-for-block-level①">block-level</a> box.</p>
   <div class="note" role="note">
     Note: In the example below "inline-span" would be represented as a single <code class="idl"><a data-link-type="idl" href="#layoutchild" id="ref-for-layoutchild①">LayoutChild</a></code> with
    both "block" and "float" being <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#atomic-inline" id="ref-for-atomic-inline①">atomic inlines</a>. 
<pre class="lang-html highlight"><c- p>&lt;</c-><c- f>span</c-> <c- e>id</c-><c- o>=</c-><c- s>"inline-span"</c-><c- p>></c->
  Text
  <c- p>&lt;</c-><c- f>div</c-> <c- e>id</c-><c- o>=</c-><c- s>"block"</c-><c- p>>&lt;/</c-><c- f>div</c-><c- p>></c->
  <c- p>&lt;</c-><c- f>div</c-> <c- e>id</c-><c- o>=</c-><c- s>"float"</c-><c- p>>&lt;/</c-><c- f>div</c-><c- p>></c->
  Text
<c- p>&lt;/</c-><c- f>span</c-><c- p>></c->
</pre>
   </div>
   <h2 class="heading settled" data-level="3" id="layout-worklet"><span class="secno">3. </span><span class="content">Layout Worklet</span><a class="self-link" href="#layout-worklet"></a></h2>
   <p>The <code class="idl"><a data-link-type="idl" href="#dom-css-layoutworklet" id="ref-for-dom-css-layoutworklet">layoutWorklet</a></code> attribute allows access to the <code class="idl"><a data-link-type="idl" href="https://drafts.css-houdini.org/worklets/#worklet" id="ref-for-worklet">Worklet</a></code> responsible for all the classes
which are related to layout.</p>
   <p>The <code class="idl"><a data-link-type="idl" href="#dom-css-layoutworklet" id="ref-for-dom-css-layoutworklet①">layoutWorklet</a></code>'s <a data-link-type="dfn" href="https://drafts.css-houdini.org/worklets/#worklet-global-scope-type" id="ref-for-worklet-global-scope-type">worklet global scope type</a> is <code class="idl"><a data-link-type="idl" href="#layoutworkletglobalscope" id="ref-for-layoutworkletglobalscope">LayoutWorkletGlobalScope</a></code>.</p>
<pre class="idl highlight def"><c- b>partial</c-> <c- b>namespace</c-> <a class="idl-code" data-link-type="namespace" href="https://drafts.csswg.org/cssom-1/#namespacedef-css" id="ref-for-namespacedef-css"><c- g>CSS</c-></a> {
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SameObject" id="ref-for-SameObject"><c- g>SameObject</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://drafts.css-houdini.org/worklets/#worklet" id="ref-for-worklet①"><c- n>Worklet</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="CSS" data-dfn-type="attribute" data-export data-readonly data-type="Worklet" id="dom-css-layoutworklet"><code><c- g>layoutWorklet</c-></code></dfn>;
};
</pre>
   <p>The <code class="idl"><a data-link-type="idl" href="#layoutworkletglobalscope" id="ref-for-layoutworkletglobalscope①">LayoutWorkletGlobalScope</a></code> is the global execution context of the <code class="idl"><a data-link-type="idl" href="#dom-css-layoutworklet" id="ref-for-dom-css-layoutworklet②">layoutWorklet</a></code>.</p>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Global" id="ref-for-Global"><c- g>Global</c-></a>=(<a class="n" data-link-type="idl-name" href="https://drafts.css-houdini.org/worklets/#worklet" id="ref-for-worklet②"><c- n>Worklet</c-></a>,<a class="n" data-link-type="idl-name"><c- n>LayoutWorklet</c-></a>),<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed"><c- g>Exposed</c-></a>=<c- n>LayoutWorklet</c->]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="layoutworkletglobalscope"><code><c- g>LayoutWorkletGlobalScope</c-></code></dfn> : <a class="n" data-link-type="idl-name" href="https://drafts.css-houdini.org/worklets/#workletglobalscope" id="ref-for-workletglobalscope"><c- n>WorkletGlobalScope</c-></a> {
    <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-layoutworkletglobalscope-registerlayout" id="ref-for-dom-layoutworkletglobalscope-registerlayout"><c- g>registerLayout</c-></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString"><c- b>DOMString</c-></a> <dfn class="idl-code" data-dfn-for="LayoutWorkletGlobalScope/registerLayout(name, layoutCtor)" data-dfn-type="argument" data-export id="dom-layoutworkletglobalscope-registerlayout-name-layoutctor-name"><code><c- g>name</c-></code><a class="self-link" href="#dom-layoutworkletglobalscope-registerlayout-name-layoutctor-name"></a></dfn>, <a class="n" data-link-type="idl-name" href="https://heycam.github.io/webidl/#VoidFunction" id="ref-for-VoidFunction"><c- n>VoidFunction</c-></a> <dfn class="idl-code" data-dfn-for="LayoutWorkletGlobalScope/registerLayout(name, layoutCtor)" data-dfn-type="argument" data-export id="dom-layoutworkletglobalscope-registerlayout-name-layoutctor-layoutctor"><code><c- g>layoutCtor</c-></code><a class="self-link" href="#dom-layoutworkletglobalscope-registerlayout-name-layoutctor-layoutctor"></a></dfn>);
};
</pre>
   <div class="example" id="example-c2dc04c5">
    <a class="self-link" href="#example-c2dc04c5"></a> Web developers can feature detect by: 
<pre class="lang-javascript highlight"><c- k>if</c-> <c- p>(</c-><c- t>'layoutWorklet'</c-> <c- k>in</c-> CSS<c- p>)</c-> <c- p>{</c->
  console<c- p>.</c->log<c- p>(</c-><c- t>'CSS Layout API available!'</c-><c- p>);</c->
<c- p>}</c->
</pre>
   </div>
   <h3 class="heading settled" data-level="3.1" id="concepts"><span class="secno">3.1. </span><span class="content">Concepts</span><a class="self-link" href="#concepts"></a></h3>
   <p>This section describes internal data-structures created when <code class="idl"><a data-link-type="idl" href="#dom-layoutworkletglobalscope-registerlayout" id="ref-for-dom-layoutworkletglobalscope-registerlayout①">registerLayout(name, layoutCtor)</a></code> is
called.</p>
   <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="layout-definition">layout definition</dfn> is a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#struct" id="ref-for-struct">struct</a> which describes the information needed by the <code class="idl"><a data-link-type="idl" href="#layoutworkletglobalscope" id="ref-for-layoutworkletglobalscope②">LayoutWorkletGlobalScope</a></code> about the author defined layout (which can be referenced by the <a class="css" data-link-type="maybe" href="#valdef-display-layout" id="ref-for-valdef-display-layout②">layout()</a> function). It consists of:</p>
   <ul>
    <li data-md>
     <p><dfn class="dfn-paneled" data-dfn-for="layout definition" data-dfn-type="dfn" data-noexport id="layout-definition-class-constructor">class constructor</dfn> which is the class <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-constructor" id="ref-for-sec-constructor">constructor</a>.</p>
    <li data-md>
     <p><dfn class="dfn-paneled" data-dfn-for="layout definition" data-dfn-type="dfn" data-noexport id="layout-definition-layout-function">layout function</dfn> which is the layout <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-terms-and-definitions-function" id="ref-for-sec-terms-and-definitions-function">function</a> callback.</p>
    <li data-md>
     <p><dfn class="dfn-paneled" data-dfn-for="layout definition" data-dfn-type="dfn" data-noexport id="layout-definition-intrinsic-sizes-function">intrinsic sizes function</dfn> which is the intrinsic sizes <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-terms-and-definitions-function" id="ref-for-sec-terms-and-definitions-function①">function</a> callback.</p>
    <li data-md>
     <p><dfn class="dfn-paneled" data-dfn-for="layout definition" data-dfn-type="dfn" data-noexport id="layout-definition-constructor-valid-flag">constructor valid flag</dfn>.</p>
    <li data-md>
     <p><dfn class="dfn-paneled" data-dfn-for="layout definition" data-dfn-type="dfn" data-noexport id="layout-definition-input-properties">input properties</dfn> which is a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list" id="ref-for-list">list</a> of <code>DOMStrings</code>.</p>
    <li data-md>
     <p><dfn class="dfn-paneled" data-dfn-for="layout definition" data-dfn-type="dfn" data-noexport id="layout-definition-child-input-properties">child input properties</dfn> which is a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list" id="ref-for-list①">list</a> of <code>DOMStrings</code>.</p>
    <li data-md>
     <p><dfn class="dfn-paneled" data-dfn-for="layout definition" data-dfn-type="dfn" data-noexport id="layout-definition-layout-options">layout options</dfn> a <code class="idl"><a data-link-type="idl" href="#dictdef-layoutoptions" id="ref-for-dictdef-layoutoptions">LayoutOptions</a></code>.</p>
   </ul>
   <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="document-layout-definition">document layout definition</dfn> is a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#struct" id="ref-for-struct①">struct</a> which describes the information needed by
the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document" id="ref-for-concept-document">document</a> about the author defined layout (which can be referenced by the <a class="css" data-link-type="maybe" href="#valdef-display-layout" id="ref-for-valdef-display-layout③">layout()</a> function). It consists of:</p>
   <ul>
    <li data-md>
     <p><dfn class="dfn-paneled" data-dfn-for="document layout definition" data-dfn-type="dfn" data-noexport id="document-layout-definition-input-properties">input properties</dfn> which is a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list" id="ref-for-list②">list</a> of <code>DOMStrings</code></p>
    <li data-md>
     <p><dfn class="dfn-paneled" data-dfn-for="document layout definition" data-dfn-type="dfn" data-noexport id="document-layout-definition-child-input-properties">child input properties</dfn> which is a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list" id="ref-for-list③">list</a> of <code>DOMStrings</code>.</p>
    <li data-md>
     <p><dfn class="dfn-paneled" data-dfn-for="document layout definition" data-dfn-type="dfn" data-noexport id="document-layout-definition-layout-options">layout options</dfn> a <code class="idl"><a data-link-type="idl" href="#dictdef-layoutoptions" id="ref-for-dictdef-layoutoptions①">LayoutOptions</a></code>.</p>
   </ul>
   <h3 class="heading settled" data-level="3.2" id="registering-layout"><span class="secno">3.2. </span><span class="content">Registering A Layout</span><a class="self-link" href="#registering-layout"></a></h3>
   <p>The section describes how a web developer uses <code class="idl"><a data-link-type="idl" href="#dom-layoutworkletglobalscope-registerlayout" id="ref-for-dom-layoutworkletglobalscope-registerlayout②">registerLayout(name, layoutCtor)</a></code> to register a
layout.</p>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed①"><c- g>Exposed</c-></a>=<c- n>LayoutWorklet</c->]
<c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-layoutoptions"><code><c- g>LayoutOptions</c-></code></dfn> {
  <a class="n" data-link-type="idl-name" href="#enumdef-childdisplaytype" id="ref-for-enumdef-childdisplaytype"><c- n>ChildDisplayType</c-></a> <dfn class="dfn-paneled idl-code" data-default="&quot;block&quot;" data-dfn-for="LayoutOptions" data-dfn-type="dict-member" data-export data-type="ChildDisplayType " id="dom-layoutoptions-childdisplay"><code><c- g>childDisplay</c-></code></dfn> = "block";
  <a class="n" data-link-type="idl-name" href="#enumdef-layoutsizingmode" id="ref-for-enumdef-layoutsizingmode"><c- n>LayoutSizingMode</c-></a> <dfn class="dfn-paneled idl-code" data-default="&quot;block-like&quot;" data-dfn-for="LayoutOptions" data-dfn-type="dict-member" data-export data-type="LayoutSizingMode " id="dom-layoutoptions-sizing"><code><c- g>sizing</c-></code></dfn> = "block-like";
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed②"><c- g>Exposed</c-></a>=<c- n>LayoutWorklet</c->]
<c- b>enum</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="enum" data-export id="enumdef-childdisplaytype"><code><c- g>ChildDisplayType</c-></code></dfn> {
    <dfn class="idl-code" data-dfn-for="ChildDisplayType" data-dfn-type="enum-value" data-export id="dom-childdisplaytype-block"><code><c- s>"block"</c-></code><a class="self-link" href="#dom-childdisplaytype-block"></a></dfn>, // default - "blockifies" the child boxes.
    <dfn class="idl-code" data-dfn-for="ChildDisplayType" data-dfn-type="enum-value" data-export id="dom-childdisplaytype-normal"><code><c- s>"normal"</c-></code><a class="self-link" href="#dom-childdisplaytype-normal"></a></dfn>,
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed③"><c- g>Exposed</c-></a>=<c- n>LayoutWorklet</c->]
<c- b>enum</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="enum" data-export id="enumdef-layoutsizingmode"><code><c- g>LayoutSizingMode</c-></code></dfn> {
    <dfn class="idl-code" data-dfn-for="LayoutSizingMode" data-dfn-type="enum-value" data-export id="dom-layoutsizingmode-block-like"><code><c- s>"block-like"</c-></code><a class="self-link" href="#dom-layoutsizingmode-block-like"></a></dfn>, // default - Sizing behaves like block containers.
    <dfn class="idl-code" data-dfn-for="LayoutSizingMode" data-dfn-type="enum-value" data-export id="dom-layoutsizingmode-manual"><code><c- s>"manual"</c-></code><a class="self-link" href="#dom-layoutsizingmode-manual"></a></dfn>, // Sizing is specified by the web developer.
};
</pre>
   <p>The <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document" id="ref-for-concept-document①">document</a> has a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#ordered-map" id="ref-for-ordered-map">map</a> of <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="document-layout-definitions">document layout definitions</dfn>. Initially this map is
empty; it is populated when <code class="idl"><a data-link-type="idl" href="#dom-layoutworkletglobalscope-registerlayout" id="ref-for-dom-layoutworkletglobalscope-registerlayout③">registerLayout(name, layoutCtor)</a></code> is called.</p>
   <p>The <code class="idl"><a data-link-type="idl" href="#layoutworkletglobalscope" id="ref-for-layoutworkletglobalscope③">LayoutWorkletGlobalScope</a></code> has a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#ordered-map" id="ref-for-ordered-map①">map</a> of <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="layout-definitions">layout definitions</dfn>. Initially this map
is empty; it is populated when <code class="idl"><a data-link-type="idl" href="#dom-layoutworkletglobalscope-registerlayout" id="ref-for-dom-layoutworkletglobalscope-registerlayout④">registerLayout(name, layoutCtor)</a></code> is called.</p>
   <p>Each <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#box" id="ref-for-box①">box</a> representing a <a data-link-type="dfn" href="#layout-api-container" id="ref-for-layout-api-container⑥">layout API container</a> has a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#ordered-map" id="ref-for-ordered-map②">map</a> of <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="layout class instances" data-noexport id="layout-class-instances">layout class
instances</dfn>. Initially this map is empty; it is populated when the user agent calls either <a data-link-type="dfn" href="#determine-the-intrinsic-sizes" id="ref-for-determine-the-intrinsic-sizes">determine the intrinsic sizes</a> or <a data-link-type="dfn" href="#generate-a-fragment" id="ref-for-generate-a-fragment">generate a fragment</a> for a <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#box" id="ref-for-box②">box</a>.</p>
   <p>Each <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#box" id="ref-for-box③">box</a> representing a <a data-link-type="dfn" href="#layout-api-container" id="ref-for-layout-api-container⑦">layout API container</a> has a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="stylemap">styleMap</dfn> internal slot.
This is a <code class="idl"><a data-link-type="idl" href="https://drafts.css-houdini.org/css-typed-om-1/#stylepropertymapreadonly" id="ref-for-stylepropertymapreadonly">StylePropertyMapReadOnly</a></code> which contains the properties listed in <code>inputProperties</code>.</p>
   <p>The user agent <em>clear</em> the <a data-link-type="dfn" href="#stylemap" id="ref-for-stylemap">styleMap</a> internal slot for a <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#box" id="ref-for-box④">box</a> when:</p>
   <ul>
    <li data-md>
     <p>The <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#computed-value" id="ref-for-computed-value②">computed values</a> of <a data-link-type="dfn" href="#document-layout-definition-input-properties" id="ref-for-document-layout-definition-input-properties">input properties</a> for the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#box" id="ref-for-box⑤">box</a> changes.</p>
    <li data-md>
     <p>When the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#box" id="ref-for-box⑥">box</a> is removed from the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#box tree" id="ref-for-box tree②">box tree</a>.</p>
    <li data-md>
     <p>Every 1000 layout passes.</p>
     <p class="note" role="note"><span>Note:</span> The above rule exists to ensure that web developers do not rely on being able to store
    non-regeneratable state on the <code class="idl"><a data-link-type="idl" href="https://drafts.css-houdini.org/css-typed-om-1/#stylepropertymapreadonly" id="ref-for-stylepropertymapreadonly①">StylePropertyMapReadOnly</a></code> object.
    The 1000 limit was picked as a high upper bound, this limit may improve (downwards) over
    time.</p>
   </ul>
   <div class="note" role="note">
     Note: The shape of the class should be: 
<pre class="lang-javascript highlight">registerLayout<c- p>(</c-><c- t>'example'</c-><c- p>,</c-> <c- kr>class</c-> <c- p>{</c->
    <c- kr>static</c-> inputProperties <c- o>=</c-> <c- p>[</c-><c- t>'--foo'</c-><c- p>];</c->
    <c- kr>static</c-> childrenInputProperties <c- o>=</c-> <c- p>[</c-><c- t>'--bar'</c-><c- p>];</c->
    <c- kr>static</c-> layoutOptions <c- o>=</c-> <c- p>{</c->
      childDisplay<c- o>:</c-> <c- t>'normal'</c-><c- p>,</c->
      sizing<c- o>:</c-> <c- t>'block-like'</c->
    <c- p>};</c->

    async intrinsicSizes<c- p>(</c->children<c- p>,</c-> edges<c- p>,</c-> styleMap<c- p>)</c-> <c- p>{</c->
        <c- c1>// Intrinsic sizes code goes here.</c->
    <c- p>}</c->

    async layout<c- p>(</c->children<c- p>,</c-> edges<c- p>,</c-> constraints<c- p>,</c-> styleMap<c- p>,</c-> breakToken<c- p>)</c-> <c- p>{</c->
        <c- c1>// Layout code goes here.</c->
    <c- p>}</c->
<c- p>});</c->
</pre>
   </div>
   <p>The algorithm below is run when the <code class="idl"><a data-link-type="idl" href="#dom-layoutworkletglobalscope-registerlayout" id="ref-for-dom-layoutworkletglobalscope-registerlayout⑤">registerLayout(name, layoutCtor)</a></code> is called. It notifies the
user agent layout engine about the new user defined layout.</p>
   <div class="algorithm" data-algorithm="registerLayout(name, layoutCtor)">
     When the <dfn class="dfn-paneled idl-code" data-dfn-for="LayoutWorkletGlobalScope" data-dfn-type="method" data-export id="dom-layoutworkletglobalscope-registerlayout"><code>registerLayout(<var>name</var>, <var>layoutCtor</var>)</code></dfn> method
is called, the user agent <em>must</em> run the following steps: 
    <ol>
     <li data-md>
      <p>If the <var>name</var> is an empty string, <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw">throw</a> a <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-native-error-types-used-in-this-standard-typeerror" id="ref-for-sec-native-error-types-used-in-this-standard-typeerror">TypeError</a> and abort all these steps.</p>
     <li data-md>
      <p>Let <var>layoutDefinitionMap</var> be <code class="idl"><a data-link-type="idl" href="#layoutworkletglobalscope" id="ref-for-layoutworkletglobalscope④">LayoutWorkletGlobalScope</a></code>'s <a data-link-type="dfn" href="#layout-definitions" id="ref-for-layout-definitions">layout definitions</a> map.</p>
     <li data-md>
      <p>If <var>layoutDefinitionMap</var>[<var>name</var>] <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#map-exists" id="ref-for-map-exists">exists</a> <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw①">throw</a> a "<code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#invalidmodificationerror" id="ref-for-invalidmodificationerror">InvalidModificationError</a></code>" <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException">DOMException</a></code> and abort all these steps.</p>
     <li data-md>
      <p>Let <var>inputProperties</var> be an empty <code>sequence&lt;DOMString></code>.</p>
     <li data-md>
      <p>Let <var>inputPropertiesIterable</var> be the result of <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-get-o-p" id="ref-for-sec-get-o-p">Get</a>(<var>layoutCtor</var>, "inputProperties").</p>
     <li data-md>
      <p>If <var>inputPropertiesIterable</var> is not undefined, then set <var>inputProperties</var> to the result of <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#javascript-string-convert" id="ref-for-javascript-string-convert">converting</a> <var>inputPropertiesIterable</var> to a <code>sequence&lt;DOMString></code>. If an
exception is <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw②">thrown</a>, rethrow the exception and abort all these steps.</p>
     <li data-md>
      <p>Filter <var>inputProperties</var> so that it only contains <a data-link-type="dfn" href="https://drafts.csswg.org/cssom-1/#supported-css-property" id="ref-for-supported-css-property">supported CSS properties</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-variables-1/#custom-property" id="ref-for-custom-property">custom
properties</a>.</p>
      <p class="note" role="note"><span>Note:</span> The list of CSS properties provided by the input properties getter can either be
    custom or native CSS properties.</p>
      <p class="note" role="note"><span>Note:</span> The list of CSS properties may contain shorthands.</p>
      <p class="note" role="note"><span>Note:</span> In order for a layout class to be forwards compatible, the list of CSS properties can
    also contains currently invalid properties for the user agent. For example <code>margin-bikeshed-property</code>.</p>
     <li data-md>
      <p>Let <var>childInputProperties</var> be an empty <code>sequence&lt;DOMString></code>.</p>
     <li data-md>
      <p>Let <var>childInputPropertiesIterable</var> be the result of <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-get-o-p" id="ref-for-sec-get-o-p①">Get</a>(<var>layoutCtor</var>,
"childInputProperties").</p>
     <li data-md>
      <p>If <var>childInputPropertiesIterable</var> is not undefined, then set <var>childInputProperties</var> to the
result of <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#javascript-string-convert" id="ref-for-javascript-string-convert①">converting</a> <var>childInputPropertiesIterable</var> to a <code>sequence&lt;DOMString></code>. If an exception is <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw③">thrown</a>, rethrow the exception
and abort all these steps.</p>
     <li data-md>
      <p>Filter <var>childInputProperties</var> so that it only contains <a data-link-type="dfn" href="https://drafts.csswg.org/cssom-1/#supported-css-property" id="ref-for-supported-css-property①">supported CSS properties</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-variables-1/#custom-property" id="ref-for-custom-property①">custom
properties</a>.</p>
     <li data-md>
      <p>Let <var>layoutOptionsValue</var> be the result of <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-get-o-p" id="ref-for-sec-get-o-p②">Get</a>(<var>layoutCtor</var>, "layoutOptions").</p>
     <li data-md>
      <p>Let <var>layoutOptions</var> be the result of <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#javascript-string-convert" id="ref-for-javascript-string-convert②">converting</a> <var>layoutOptionsValue</var> to a <code class="idl"><a data-link-type="idl" href="#dictdef-layoutoptions" id="ref-for-dictdef-layoutoptions②">LayoutOptions</a></code>. If an exception is <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw④">thrown</a>, rethrow the exception and abort all these
steps.</p>
     <li data-md>
      <p>Let <var>prototype</var> be the result of <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-get-o-p" id="ref-for-sec-get-o-p③">Get</a>(<var>layoutCtor</var>, "prototype").</p>
     <li data-md>
      <p>If the result of <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-ecmascript-data-types-and-values" id="ref-for-sec-ecmascript-data-types-and-values">Type</a>(<var>prototype</var>) is not Object, <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw⑤">throw</a> a <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-native-error-types-used-in-this-standard-typeerror" id="ref-for-sec-native-error-types-used-in-this-standard-typeerror①">TypeError</a> and abort
all these steps.</p>
     <li data-md>
      <p>Let <var>intrinsicSizesValue</var> be the result of <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-get-o-p" id="ref-for-sec-get-o-p④">Get</a>(<var>prototype</var>, "intrinsicSizes").</p>
     <li data-md>
      <p>Let <var>intrinsicSizes</var> be the result of <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#javascript-string-convert" id="ref-for-javascript-string-convert③">converting</a> <var>intrinsicSizesValue</var> to the <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-terms-and-definitions-function" id="ref-for-sec-terms-and-definitions-function②">Function</a> <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-callback-function" id="ref-for-dfn-callback-function">callback function</a> type. Rethrow any exceptions from the conversion.</p>
     <li data-md>
      <p>Let <var>layoutValue</var> be the result of <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-get-o-p" id="ref-for-sec-get-o-p⑤">Get</a>(<var>prototype</var>, <code>"layout"</code>).</p>
     <li data-md>
      <p>Let <var>layout</var> be the result of <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#javascript-string-convert" id="ref-for-javascript-string-convert④">converting</a> <var>layoutValue</var> to the <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-terms-and-definitions-function" id="ref-for-sec-terms-and-definitions-function③">Function</a> <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-callback-function" id="ref-for-dfn-callback-function①">callback
function</a> type. Rethrow any exceptions from the conversion.</p>
     <li data-md>
      <p>Let <var>definition</var> be a new <a data-link-type="dfn" href="#layout-definition" id="ref-for-layout-definition">layout definition</a> with:</p>
      <ul>
       <li data-md>
        <p><a data-link-type="dfn" href="#layout-definition-class-constructor" id="ref-for-layout-definition-class-constructor">class constructor</a> being <var>layoutCtor</var>.</p>
       <li data-md>
        <p><a data-link-type="dfn" href="#layout-definition-layout-function" id="ref-for-layout-definition-layout-function">layout function</a> being <var>layout</var>.</p>
       <li data-md>
        <p><a data-link-type="dfn" href="#layout-definition-intrinsic-sizes-function" id="ref-for-layout-definition-intrinsic-sizes-function">intrinsic sizes function</a> being <var>intrinsicSizes</var>.</p>
       <li data-md>
        <p><a data-link-type="dfn" href="#layout-definition-constructor-valid-flag" id="ref-for-layout-definition-constructor-valid-flag">constructor valid flag</a> being <b>true</b>.</p>
       <li data-md>
        <p><a data-link-type="dfn" href="#layout-definition-child-input-properties" id="ref-for-layout-definition-child-input-properties">child input properties</a> being <var>childInputProperties</var>.</p>
       <li data-md>
        <p><a data-link-type="dfn" href="#layout-definition-input-properties" id="ref-for-layout-definition-input-properties">input properties</a> being <var>inputProperties</var>.</p>
       <li data-md>
        <p><a data-link-type="dfn" href="#layout-definition-layout-options" id="ref-for-layout-definition-layout-options">layout options</a> being <var>layoutOptions</var>.</p>
      </ul>
     <li data-md>
      <p><a data-link-type="dfn" href="https://infra.spec.whatwg.org/#map-set" id="ref-for-map-set">Set</a> <var>layoutDefinitionMap</var>[<var>name</var>] to <var>definition</var>.</p>
     <li data-md>
      <p><a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task" id="ref-for-queue-a-task">Queue a task</a> to run the following steps:</p>
      <ol>
       <li data-md>
        <p>Let <var>documentLayoutDefinitionMap</var> be the associated <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document" id="ref-for-concept-document②">document’s</a> <a data-link-type="dfn" href="#document-layout-definitions" id="ref-for-document-layout-definitions">document layout
definitions</a> <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#ordered-map" id="ref-for-ordered-map③">map</a>.</p>
       <li data-md>
        <p>Let <var>documentDefinition</var> be a new <a data-link-type="dfn" href="#document-layout-definition" id="ref-for-document-layout-definition">document layout definition</a> with:</p>
        <ul>
         <li data-md>
          <p><a data-link-type="dfn" href="#document-layout-definition-child-input-properties" id="ref-for-document-layout-definition-child-input-properties">child input properties</a> being <var>childInputProperties</var>.</p>
         <li data-md>
          <p><a data-link-type="dfn" href="#document-layout-definition-input-properties" id="ref-for-document-layout-definition-input-properties①">input properties</a> being <var>inputProperties</var>.</p>
         <li data-md>
          <p><a data-link-type="dfn" href="#document-layout-definition-layout-options" id="ref-for-document-layout-definition-layout-options③">layout options</a> being <var>layoutOptions</var>.</p>
        </ul>
       <li data-md>
        <p>If <var>documentLayoutDefinitionMap</var>[<var>name</var>] <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#map-exists" id="ref-for-map-exists①">exists</a>, run the following steps:</p>
        <ol>
         <li data-md>
          <p>Let <var>existingDocumentDefinition</var> be the result of <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#map-get" id="ref-for-map-get">get</a> <var>documentLayoutDefinitionMap</var>[<var>name</var>].</p>
         <li data-md>
          <p>If <var>existingDocumentDefinition</var> is <code>"invalid"</code>, abort all these steps.</p>
         <li data-md>
          <p>If <var>existingDocumentDefinition</var> and <var>documentDefinition</var> are not equivalent, (that is <a data-link-type="dfn" href="#document-layout-definition-input-properties" id="ref-for-document-layout-definition-input-properties②">input properties</a>, <a data-link-type="dfn" href="#document-layout-definition-child-input-properties" id="ref-for-document-layout-definition-child-input-properties①">child
input properties</a>, and <a data-link-type="dfn" href="#document-layout-definition-layout-options" id="ref-for-document-layout-definition-layout-options④">layout options</a> are
different), then:</p>
          <p><a data-link-type="dfn" href="https://infra.spec.whatwg.org/#map-set" id="ref-for-map-set①">Set</a> <var>documentLayoutDefinitionMap</var>[<var>name</var>] to <code>"invalid"</code>.</p>
          <p>Log an error to the debugging console stating that the same class was registered
with different <code>inputProperties</code>, <code>childInputProperties</code>, or <code>layoutOptions</code>.</p>
        </ol>
       <li data-md>
        <p>Otherwise, <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#map-set" id="ref-for-map-set②">set</a> <var>documentLayoutDefinitionMap</var>[<var>name</var>] to <var>documentDefinition</var>.</p>
      </ol>
    </ol>
   </div>
   <h3 class="heading settled" data-level="3.3" id="terminology"><span class="secno">3.3. </span><span class="content">Terminology</span><a class="self-link" href="#terminology"></a></h3>
   <p>We define the following terms to be clear about which layout algorithm (formatting context) we are
talking about.</p>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="current-layout">current layout</dfn> is the layout algorithm for the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#box" id="ref-for-box⑦">box</a> we are currently performing
layout for.</p>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="parent-layout">parent layout</dfn> is the layout algorithm for the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#box" id="ref-for-box⑧">box’s</a> direct parent, (the layout
algorithm which is requesting the <a data-link-type="dfn" href="#current-layout" id="ref-for-current-layout">current layout</a> to be performed).</p>
   <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="child-layout">child layout</dfn> is the layout algorithm for a <code class="idl"><a data-link-type="idl" href="#layoutchild" id="ref-for-layoutchild②">LayoutChild</a></code> of the <a data-link-type="dfn" href="#current-layout" id="ref-for-current-layout①">current layout</a>.</p>
   <h2 class="heading settled" data-level="4" id="layout-api"><span class="secno">4. </span><span class="content">Layout API</span><a class="self-link" href="#layout-api"></a></h2>
   <p>This section describes the objects of the Layout API provided to web developers.</p>
   <h3 class="heading settled" data-level="4.1" id="layout-children"><span class="secno">4.1. </span><span class="content">Layout Children</span><a class="self-link" href="#layout-children"></a></h3>
   <p>A <code class="idl"><a data-link-type="idl" href="#layoutchild" id="ref-for-layoutchild③">LayoutChild</a></code> represents a inflow CSS generated <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#box" id="ref-for-box⑨">box</a> before layout has occurred. (The box or
boxes will all have a computed value of <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-display-3/#propdef-display" id="ref-for-propdef-display①">display</a> that is not <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-display-3/#valdef-display-none" id="ref-for-valdef-display-none">none</a>).</p>
   <p>The <code class="idl"><a data-link-type="idl" href="#layoutchild" id="ref-for-layoutchild④">LayoutChild</a></code> does not contain any layout information itself (like inline or block size) but
can be used to generate <code class="idl"><a data-link-type="idl" href="#layoutfragment" id="ref-for-layoutfragment①">LayoutFragment</a></code>s which do contain layout information.</p>
   <p>An author cannot construct a <code class="idl"><a data-link-type="idl" href="#layoutchild" id="ref-for-layoutchild⑤">LayoutChild</a></code> with this API, this happens at a separate stage of the
user agent rendering engine (post style resolution).</p>
   <p>An array of <code class="idl"><a data-link-type="idl" href="#layoutchild" id="ref-for-layoutchild⑥">LayoutChild</a></code>ren is passed into the layout/intrinsicSizes methods which represents the
children of the current box which is being laid out.</p>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed④"><c- g>Exposed</c-></a>=<c- n>LayoutWorklet</c->]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="layoutchild"><code><c- g>LayoutChild</c-></code></dfn> {
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://drafts.css-houdini.org/css-typed-om-1/#stylepropertymapreadonly" id="ref-for-stylepropertymapreadonly②"><c- n>StylePropertyMapReadOnly</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="StylePropertyMapReadOnly" href="#dom-layoutchild-stylemap" id="ref-for-dom-layoutchild-stylemap"><c- g>styleMap</c-></a>;

    <c- b>Promise</c->&lt;<a class="n" data-link-type="idl-name" href="#intrinsicsizes" id="ref-for-intrinsicsizes"><c- n>IntrinsicSizes</c-></a>> <a class="idl-code" data-link-type="method" href="#dom-layoutchild-intrinsicsizes" id="ref-for-dom-layoutchild-intrinsicsizes"><c- g>intrinsicSizes</c-></a>();
    <c- b>Promise</c->&lt;<a class="n" data-link-type="idl-name" href="#layoutfragment" id="ref-for-layoutfragment②"><c- n>LayoutFragment</c-></a>> <a class="idl-code" data-link-type="method" href="#dom-layoutchild-layoutnextfragment" id="ref-for-dom-layoutchild-layoutnextfragment①"><c- g>layoutNextFragment</c-></a>(<a class="n" data-link-type="idl-name" href="#dictdef-layoutconstraintsoptions" id="ref-for-dictdef-layoutconstraintsoptions"><c- n>LayoutConstraintsOptions</c-></a> <dfn class="idl-code" data-dfn-for="LayoutChild/layoutNextFragment(constraints, breakToken)" data-dfn-type="argument" data-export id="dom-layoutchild-layoutnextfragment-constraints-breaktoken-constraints"><code><c- g>constraints</c-></code><a class="self-link" href="#dom-layoutchild-layoutnextfragment-constraints-breaktoken-constraints"></a></dfn>, <a class="n" data-link-type="idl-name" href="#childbreaktoken" id="ref-for-childbreaktoken"><c- n>ChildBreakToken</c-></a> <dfn class="idl-code" data-dfn-for="LayoutChild/layoutNextFragment(constraints, breakToken)" data-dfn-type="argument" data-export id="dom-layoutchild-layoutnextfragment-constraints-breaktoken-breaktoken"><code><c- g>breakToken</c-></code><a class="self-link" href="#dom-layoutchild-layoutnextfragment-constraints-breaktoken-breaktoken"></a></dfn>);
};
</pre>
   <p>The <code class="idl"><a data-link-type="idl" href="#layoutchild" id="ref-for-layoutchild⑦">LayoutChild</a></code> has internal slot(s):</p>
   <ul>
    <li data-md>
     <p><dfn class="dfn-paneled idl-code" data-dfn-for="LayoutChild" data-dfn-type="attribute" data-export id="dom-layoutchild-box-slot"><code>[[box]]</code></dfn> a CSS <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#box" id="ref-for-box①⓪">box</a>.</p>
    <li data-md>
     <p><dfn class="dfn-paneled idl-code" data-dfn-for="LayoutChild" data-dfn-type="attribute" data-export id="dom-layoutchild-stylemap-slot"><code>[[styleMap]]</code></dfn> a <code class="idl"><a data-link-type="idl" href="https://drafts.css-houdini.org/css-typed-om-1/#stylepropertymapreadonly" id="ref-for-stylepropertymapreadonly③">StylePropertyMapReadOnly</a></code>, this is the
computed style for the child, it is populated with only the properties listed in <code>childInputProperties</code>.</p>
   </ul>
   <ul>
    <li data-md>
     <p><dfn class="dfn-paneled idl-code" data-dfn-for="LayoutChild" data-dfn-type="attribute" data-export id="dom-layoutchild-unique-id-slot"><code>[[unique id]]</code></dfn> the <a data-link-type="dfn" href="#layout-api-context-unique-id" id="ref-for-layout-api-context-unique-id">unique id</a> of the current <a data-link-type="dfn" href="#layout-api-context" id="ref-for-layout-api-context">layout
   api context</a>. This slot is used so that a <code class="idl"><a data-link-type="idl" href="#layoutchild" id="ref-for-layoutchild⑧">LayoutChild</a></code> used outside the current layout
   pass is invalid.</p>
   </ul>
   <p>The <code class="idl"><a data-link-type="idl" href="#dom-layoutchild-stylemap-slot" id="ref-for-dom-layoutchild-stylemap-slot">[[styleMap]]</a></code> may be pre-populated when the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#computed-value" id="ref-for-computed-value③">computed value</a> for properties
listed in the in <a data-link-type="dfn" href="#layout-definition-child-input-properties" id="ref-for-layout-definition-child-input-properties①">child input properties</a> for the <code class="idl"><a data-link-type="idl" href="#dom-layoutchild-box-slot" id="ref-for-dom-layoutchild-box-slot">[[box]]</a></code>.</p>
   <div class="example" id="example-0b365c06">
    <a class="self-link" href="#example-0b365c06"></a> The example below shows the basic usage of a <code class="idl"><a data-link-type="idl" href="#layoutchild" id="ref-for-layoutchild⑨">LayoutChild</a></code>. 
<pre class="lang-javascript highlight">registerLayout<c- p>(</c-><c- t>'example-layout-child'</c-><c- p>,</c-> <c- kr>class</c-> <c- p>{</c->
  <c- kr>static</c-> childInputProperties <c- o>=</c-> <c- p>[</c-><c- t>'--foo'</c-><c- p>];</c->

  async layout<c- p>(</c->children<c- p>,</c-> edges<c- p>,</c-> constraints<c- p>,</c-> styleMap<c- p>)</c-> <c- p>{</c->

    <c- c1>// An array of LayoutChildren is passed into both the layout function,</c->
    <c- c1>// and intrinsic sizes function below.</c->
    <c- kr>const</c-> child <c- o>=</c-> children<c- p>[</c-><c- mi>0</c-><c- p>];</c->

    <c- c1>// You can query the any properties listed in "childInputProperties".</c->
    <c- kr>const</c-> fooValue <c- o>=</c-> child<c- p>.</c->styleMap<c- p>.</c->get<c- p>(</c-><c- t>'--foo'</c-><c- p>);</c->

    <c- c1>// And perform layout!</c->
    <c- kr>const</c-> fragment <c- o>=</c-> await child<c- p>.</c->layoutNextFragment<c- p>({});</c->

  <c- p>}</c->

  async intrinsicSizes<c- p>(</c->children<c- p>,</c-> edges<c- p>,</c-> styleMap<c- p>)</c-> <c- p>{</c->

    <c- c1>// Or request the intrinsic size!</c->
    <c- kr>const</c-> childIntrinsicSize <c- o>=</c-> await children<c- p>[</c-><c- mi>0</c-><c- p>].</c->intrinsicSizes<c- p>();</c->

  <c- p>}</c->
<c- p>});</c->
</pre>
   </div>
   <p>A <code class="idl"><a data-link-type="idl" href="#layoutchild" id="ref-for-layoutchild①⓪">LayoutChild</a></code> could be generated by:</p>
   <ul>
    <li data-md>
     <p>An <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element" id="ref-for-concept-element">element</a>.</p>
    <li data-md>
     <p>A <a data-link-type="dfn" href="https://drafts.csswg.org/css-inline-3/#root-inline-box" id="ref-for-root-inline-box②">root inline box</a>.</p>
    <li data-md>
     <p>A <a class="css" data-link-type="selector" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-before" id="ref-for-selectordef-before">::before</a> or <a class="css" data-link-type="selector" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-after" id="ref-for-selectordef-after">::after</a> pseudo-element.</p>
     <p class="note" role="note"><span>Note:</span> Other pseudo-elements such as <a class="css" data-link-type="selector" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-first-letter" id="ref-for-selectordef-first-letter">::first-letter</a> or <a class="css" data-link-type="selector" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-first-line" id="ref-for-selectordef-first-line">::first-line</a> do not
    generate a <code class="idl"><a data-link-type="idl" href="#layoutchild" id="ref-for-layoutchild①①">LayoutChild</a></code> for layout purposes. They are additional
    styling information for a text node.</p>
    <li data-md>
     <p>An <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#anonymous" id="ref-for-anonymous">anonymous box</a>. For example an anonymous box may be inserted as a result of:</p>
     <ul>
      <li data-md>
       <p>A text node which has undergone <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#blockify" id="ref-for-blockify②">blockification</a>. (Or more generally a <a data-link-type="dfn" href="https://drafts.csswg.org/css-inline-3/#root-inline-box" id="ref-for-root-inline-box③">root inline box</a> which has undergone <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#blockify" id="ref-for-blockify③">blockification</a>).</p>
      <li data-md>
       <p>An element with <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-display-3/#propdef-display" id="ref-for-propdef-display②">display: table-cell</a> which doesn’t have a parent with <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-display-3/#propdef-display" id="ref-for-propdef-display③">display: table</a>.</p>
     </ul>
   </ul>
   <div class="note" role="note">
     Note: As an example the following would be placed into three <code class="idl"><a data-link-type="idl" href="#layoutchild" id="ref-for-layoutchild①②">LayoutChild</a></code>ren: 
<pre class="lang-html highlight"><c- p>&lt;</c-><c- f>style</c-><c- p>></c->
  <c- p>#</c-><c- nn>box</c-><c- p>::</c-><c- nd>before</c-> <c- p>{</c-> <c- k>content</c-><c- p>:</c-> <c- t>'hello!'</c-><c- p>;</c-> <c- p>}</c->
<c- p>&lt;/</c-><c- f>style</c-><c- p>></c->
<c- p>&lt;</c-><c- f>div</c-> <c- e>id</c-><c- o>=</c-><c- s>"box"</c-><c- p>></c->A block level box with text.<c- p>&lt;/</c-><c- f>div</c-><c- p>></c->
<c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>"..."</c-> <c- p>/></c->
</pre>
   </div>
   <div class="note" role="note">
     Note: As an example the following would be placed into a single <code class="idl"><a data-link-type="idl" href="#layoutchild" id="ref-for-layoutchild①③">LayoutChild</a></code> as they share a <a data-link-type="dfn" href="https://drafts.csswg.org/css-inline-3/#root-inline-box" id="ref-for-root-inline-box④">root inline box</a>: 
<pre class="lang-html highlight">This is a next node, <c- p>&lt;</c-><c- f>span</c-><c- p>></c->with some additional styling,
that may<c- p>&lt;/</c-><c- f>span</c-><c- p>></c-> break over<c- p>&lt;</c-><c- f>br</c-><c- p>></c->multiple lines.
</pre>
   </div>
   <p>Multiple non-<a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#atomic-inline" id="ref-for-atomic-inline②">atomic inlines</a> are placed within the same <code class="idl"><a data-link-type="idl" href="#layoutchild" id="ref-for-layoutchild①④">LayoutChild</a></code> to allow rendering
engines to perform text shaping across element boundaries.</p>
   <div class="note" role="note">
     Note: As an example the following should produce one <code class="idl"><a data-link-type="idl" href="#layoutfragment" id="ref-for-layoutfragment③">LayoutFragment</a></code> but is from
    three non-<a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#atomic-inline" id="ref-for-atomic-inline③">atomic inlines</a>: 
<pre class="lang-html highlight">ع<c- p>&lt;</c-><c- f>span</c-> <c- e>style</c-><c- o>=</c-><c- s>"color: blue"</c-><c- p>></c->ع<c- p>&lt;/</c-><c- f>span</c-><c- p>></c->ع
</pre>
   </div>
   <p class="note" role="note"><span>Note:</span> When accessing the <code class="idl"><a data-link-type="idl" href="#dom-layoutchild-stylemap" id="ref-for-dom-layoutchild-stylemap①">styleMap</a></code> the user agent can create a new <code class="idl"><a data-link-type="idl" href="https://drafts.css-houdini.org/css-typed-om-1/#stylepropertymapreadonly" id="ref-for-stylepropertymapreadonly④">StylePropertyMapReadOnly</a></code> if none exists yet.</p>
   <div class="algorithm" data-algorithm="styleMap">
     The <dfn class="dfn-paneled idl-code" data-dfn-for="LayoutChild" data-dfn-type="attribute" data-export id="dom-layoutchild-stylemap"><code>styleMap</code></dfn>, on getting from a <code class="idl"><a data-link-type="idl" href="#layoutchild" id="ref-for-layoutchild①⑤">LayoutChild</a></code> <var>this</var>, the
user agent must perform the following steps: 
    <ol>
     <li data-md>
      <p>If <var>this</var>’ <code class="idl"><a data-link-type="idl" href="#dom-layoutchild-stylemap-slot" id="ref-for-dom-layoutchild-stylemap-slot①">[[styleMap]]</a></code> is null, then:</p>
      <ol>
       <li data-md>
        <p>Let <var>box</var> be <var>this</var>’ <code class="idl"><a data-link-type="idl" href="#dom-layoutchild-box-slot" id="ref-for-dom-layoutchild-box-slot①">[[box]]</a></code>.</p>
       <li data-md>
        <p>Let <var>definition</var> be the result of <a data-link-type="dfn" href="#get-a-layout-definition" id="ref-for-get-a-layout-definition">get a layout definition</a>.</p>
       <li data-md>
        <p>Let <var>childInputProperties</var> be <var>definition</var>’s <a data-link-type="dfn" href="#layout-definition-child-input-properties" id="ref-for-layout-definition-child-input-properties②">child input
properties</a>.</p>
       <li data-md>
        <p>Let <var>styleMap</var> be a new <code class="idl"><a data-link-type="idl" href="https://drafts.css-houdini.org/css-typed-om-1/#stylepropertymapreadonly" id="ref-for-stylepropertymapreadonly⑤">StylePropertyMapReadOnly</a></code> populated with <em>only</em> the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#computed-value" id="ref-for-computed-value④">computed values</a> for properties listed in <var>childInputProperties</var> for <var>box</var>.</p>
       <li data-md>
        <p>Set <var>this</var>’ <code class="idl"><a data-link-type="idl" href="#dom-layoutchild-stylemap-slot" id="ref-for-dom-layoutchild-stylemap-slot②">[[styleMap]]</a></code> internal slot to <var>styleMap</var>.</p>
      </ol>
      <p class="note" role="note"><span>Note:</span> If the user agent always pre-populates <code class="idl"><a data-link-type="idl" href="#dom-layoutchild-stylemap-slot" id="ref-for-dom-layoutchild-stylemap-slot③">[[styleMap]]</a></code> then this branch
    of the algorithm won’t be reached.</p>
     <li data-md>
      <p>Return <var>this</var>’ <code class="idl"><a data-link-type="idl" href="https://drafts.css-houdini.org/css-typed-om-1/#stylepropertymapreadonly" id="ref-for-stylepropertymapreadonly⑥">StylePropertyMapReadOnly</a></code> contained in the <code class="idl"><a data-link-type="idl" href="#dom-layoutchild-stylemap-slot" id="ref-for-dom-layoutchild-stylemap-slot④">[[styleMap]]</a></code> internal slot.</p>
    </ol>
   </div>
   <p class="note" role="note"><span>Note:</span> The <code class="idl"><a data-link-type="idl" href="#dom-layoutchild-intrinsicsizes" id="ref-for-dom-layoutchild-intrinsicsizes①">intrinsicSizes()</a></code> method allows the web developer to query the intrinsic sizes of the <code class="idl"><a data-link-type="idl" href="#layoutchild" id="ref-for-layoutchild①⑥">LayoutChild</a></code>.</p>
   <div class="algorithm" data-algorithm="intrinsicSizes()">
     When the <dfn class="dfn-paneled idl-code" data-dfn-for="LayoutChild" data-dfn-type="method" data-export id="dom-layoutchild-intrinsicsizes"><code>intrinsicSizes()</code></dfn> method is called on a <code class="idl"><a data-link-type="idl" href="#layoutchild" id="ref-for-layoutchild①⑦">LayoutChild</a></code> <var>this</var>, the user agent must perform the following steps: 
    <ol>
     <li data-md>
      <p>Let <var>p</var> be a new promise.</p>
     <li data-md>
      <p>Let <var>context</var> be the <a data-link-type="dfn" href="#current-layout" id="ref-for-current-layout②">current layout’s</a> <a data-link-type="dfn" href="#layout-api-context" id="ref-for-layout-api-context①">layout API context</a>.</p>
     <li data-md>
      <p>If <var>this</var>’ <code class="idl"><a data-link-type="idl" href="#dom-layoutchild-unique-id-slot" id="ref-for-dom-layoutchild-unique-id-slot">[[unique id]]</a></code> is not equal to <var>context</var>’s <a data-link-type="dfn" href="#layout-api-context-unique-id" id="ref-for-layout-api-context-unique-id①">unique id</a>, reject <var>p</var> with a "<code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#invalidstateerror" id="ref-for-invalidstateerror">InvalidStateError</a></code>" <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException①">DOMException</a></code>, and abort all these steps.</p>
      <p class="note" role="note"><span>Note:</span> This is to ensure that only <code class="idl"><a data-link-type="idl" href="#layoutchild" id="ref-for-layoutchild①⑧">LayoutChild</a></code>ren passed in as arguments to either the
    layout or intrinsicSizes method are used.</p>
     <li data-md>
      <p>Let <var>task</var> be a new <a data-link-type="dfn" href="#layout-api-work-task" id="ref-for-layout-api-work-task">layout API work task</a> with:</p>
      <ul>
       <li data-md>
        <p><a data-link-type="dfn" href="#layout-api-work-task-layout-child" id="ref-for-layout-api-work-task-layout-child">layout child</a> being <var>this</var>.</p>
       <li data-md>
        <p><a data-link-type="dfn" href="#layout-api-work-task-task-type" id="ref-for-layout-api-work-task-task-type">task type</a> being <code>"intrinsic-sizes"</code>.</p>
       <li data-md>
        <p><a data-link-type="dfn" href="#layout-api-work-task-promise" id="ref-for-layout-api-work-task-promise">promise</a> being <var>p</var>.</p>
      </ul>
     <li data-md>
      <p><a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list-append" id="ref-for-list-append">Append</a> <var>task</var> to <var>context</var>’s <a data-link-type="dfn" href="#layout-api-context-work-queue" id="ref-for-layout-api-context-work-queue">work queue</a>.</p>
     <li data-md>
      <p>Return <var>p</var>.</p>
    </ol>
   </div>
   <p class="note" role="note"><span>Note:</span> The <code class="idl"><a data-link-type="idl" href="#dom-layoutchild-layoutnextfragment" id="ref-for-dom-layoutchild-layoutnextfragment②">layoutNextFragment()</a></code> method allows the web developer to produce a <code class="idl"><a data-link-type="idl" href="#layoutfragment" id="ref-for-layoutfragment④">LayoutFragment</a></code> for a given <code class="idl"><a data-link-type="idl" href="#layoutchild" id="ref-for-layoutchild①⑨">LayoutChild</a></code> (the result of performing layout).</p>
   <div class="algorithm" data-algorithm="layoutNextFragment(constraints, breakToken)">
     When the <dfn class="dfn-paneled idl-code" data-dfn-for="LayoutChild" data-dfn-type="method" data-export id="dom-layoutchild-layoutnextfragment"><code>layoutNextFragment(<var>constraints</var>, <var>breakToken</var>)</code></dfn> method is
called on a <code class="idl"><a data-link-type="idl" href="#layoutchild" id="ref-for-layoutchild②⓪">LayoutChild</a></code> <var>this</var>, the user agent must perform the following steps: 
    <ol>
     <li data-md>
      <p>Let <var>p</var> be a new promise.</p>
     <li data-md>
      <p>Let <var>context</var> be the <a data-link-type="dfn" href="#current-layout" id="ref-for-current-layout③">current layout’s</a> <a data-link-type="dfn" href="#layout-api-context" id="ref-for-layout-api-context②">layout API context</a>.</p>
     <li data-md>
      <p>If <var>this</var>’ <code class="idl"><a data-link-type="idl" href="#dom-layoutchild-unique-id-slot" id="ref-for-dom-layoutchild-unique-id-slot①">[[unique id]]</a></code> is not equal to <var>context</var>’s <a data-link-type="dfn" href="#layout-api-context-unique-id" id="ref-for-layout-api-context-unique-id②">unique id</a>, reject <var>p</var> with a "<code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#invalidstateerror" id="ref-for-invalidstateerror①">InvalidStateError</a></code>" <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException②">DOMException</a></code>, and abort all these steps.</p>
      <p class="note" role="note"><span>Note:</span> This is to ensure that only <code class="idl"><a data-link-type="idl" href="#layoutchild" id="ref-for-layoutchild②①">LayoutChild</a></code>ren passed in as arguments to either the
    layout or intrinsicSizes method are used.</p>
     <li data-md>
      <p>If <var>breakToken</var>’s {{ChildBreakToken/[[unique id]]} is not equal to <var>context</var>’s <a data-link-type="dfn" href="#layout-api-context-unique-id" id="ref-for-layout-api-context-unique-id③">unique id</a>,
reject <var>p</var> with a "<code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#invalidstateerror" id="ref-for-invalidstateerror②">InvalidStateError</a></code>" <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException③">DOMException</a></code>, and abort all these steps.</p>
     <li data-md>
      <p>If <var>context</var>’s <a data-link-type="dfn" href="#layout-api-context-mode" id="ref-for-layout-api-context-mode">mode</a> is <code>"intrinsic-sizes"</code>, reject <var>p</var> with
a "<code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#notsupportederror" id="ref-for-notsupportederror">NotSupportedError</a></code>" <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException④">DOMException</a></code>.</p>
      <p class="note" role="note"><span>Note:</span> This is to ensure that inside a <code>intrinsicSizes</code> callback, <code class="idl"><a data-link-type="idl" href="#dom-layoutchild-layoutnextfragment" id="ref-for-dom-layoutchild-layoutnextfragment③">layoutNextFragment()</a></code> cannot be called.</p>
     <li data-md>
      <p>Let <var>task</var> be a new <a data-link-type="dfn" href="#layout-api-work-task" id="ref-for-layout-api-work-task①">layout API work task</a> with:</p>
      <ul>
       <li data-md>
        <p><a data-link-type="dfn" href="#layout-api-work-task-layout-constraints" id="ref-for-layout-api-work-task-layout-constraints">layout constraints</a> being <var>constraints</var>.</p>
       <li data-md>
        <p><a data-link-type="dfn" href="#layout-api-work-task-layout-child" id="ref-for-layout-api-work-task-layout-child①">layout child</a> being <var>this</var>.</p>
       <li data-md>
        <p><a data-link-type="dfn" href="#layout-api-work-task-child-break-token" id="ref-for-layout-api-work-task-child-break-token">child break token</a> being <var>breakToken</var>.</p>
       <li data-md>
        <p><a data-link-type="dfn" href="#layout-api-work-task-task-type" id="ref-for-layout-api-work-task-task-type①">task type</a> being <code>"layout"</code>.</p>
       <li data-md>
        <p><a data-link-type="dfn" href="#layout-api-work-task-promise" id="ref-for-layout-api-work-task-promise①">promise</a> being <var>p</var>.</p>
      </ul>
     <li data-md>
      <p><a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list-append" id="ref-for-list-append①">Append</a> <var>task</var> to <var>context</var>’s <a data-link-type="dfn" href="#layout-api-context-work-queue" id="ref-for-layout-api-context-work-queue①">work queue</a>.</p>
     <li data-md>
      <p>Return <var>p</var>.</p>
    </ol>
   </div>
   <h4 class="heading settled" data-level="4.1.1" id="layout-child-box-tree"><span class="secno">4.1.1. </span><span class="content">LayoutChildren and the Box Tree</span><a class="self-link" href="#layout-child-box-tree"></a></h4>
   <p>Each <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#box" id="ref-for-box①①">box</a> has a <dfn class="dfn-paneled idl-code" data-dfn-for="box" data-dfn-type="attribute" data-export id="dom-box-layoutchildmap-slot"><code>[[layoutChildMap]]</code></dfn> internal slot, which is a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#ordered-map" id="ref-for-ordered-map④">map</a> of <code class="idl"><a data-link-type="idl" href="#layoutworkletglobalscope" id="ref-for-layoutworkletglobalscope⑤">LayoutWorkletGlobalScope</a></code>s to <code class="idl"><a data-link-type="idl" href="#layoutchild" id="ref-for-layoutchild②②">LayoutChild</a></code>ren.</p>
   <p class="note" role="note"><span>Note:</span> <a data-link-type="dfn" href="#get-a-layout-child" id="ref-for-get-a-layout-child">Get a layout child</a> returns a <code class="idl"><a data-link-type="idl" href="#layoutchild" id="ref-for-layoutchild②③">LayoutChild</a></code> object for the correct <code class="idl"><a data-link-type="idl" href="#layoutworkletglobalscope" id="ref-for-layoutworkletglobalscope⑥">LayoutWorkletGlobalScope</a></code> and creates one if it doesn’t exist yet.</p>
   <div class="algorithm" data-algorithm="get a layout child">
     When the user agent wants to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="get-a-layout-child">get a layout child</dfn> given <var>workletGlobalScope</var>, <var>name</var>, <var>box</var>, and <var>uniqueId</var>, it <em>must</em> run the following steps: 
    <ol>
     <li data-md>
      <p>Assert that:</p>
      <ul>
       <li data-md>
        <p><var>box</var> is currently attached to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#box tree" id="ref-for-box tree③">box tree</a>.</p>
       <li data-md>
        <p><var>box</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#containing-block" id="ref-for-containing-block">containing block</a> is a <a data-link-type="dfn" href="#layout-api-container" id="ref-for-layout-api-container⑧">layout API container</a>.</p>
       <li data-md>
        <p>The <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#containing-block" id="ref-for-containing-block①">containing block’s</a> <a class="css" data-link-type="maybe" href="#valdef-display-layout" id="ref-for-valdef-display-layout④">layout()</a> function’s first argument is <var>name</var>.</p>
      </ul>
     <li data-md>
      <p>Let <var>layoutChildMap</var> be <var>box</var>’s <code class="idl"><a data-link-type="idl" href="#dom-box-layoutchildmap-slot" id="ref-for-dom-box-layoutchildmap-slot">[[layoutChildMap]]</a></code>.</p>
     <li data-md>
      <p>If <var>layoutChildMap</var>[<var>workletGlobalScope</var>] does not <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#map-exists" id="ref-for-map-exists②">exist</a>, run the following
steps:</p>
      <ol>
       <li data-md>
        <p>Let <var>definition</var> be the result of <a data-link-type="dfn" href="#get-a-layout-definition" id="ref-for-get-a-layout-definition①">get a layout definition</a> given <var>name</var>, and <var>workletGlobalScope</var>.</p>
        <p>Assert that <a data-link-type="dfn" href="#get-a-layout-definition" id="ref-for-get-a-layout-definition②">get a layout definition</a> succeeded, and <var>definition</var> is not <code>"invalid"</code>.</p>
       <li data-md>
        <p>Let <var>childInputProperties</var> be <var>definition</var>’s <a data-link-type="dfn" href="#layout-definition-child-input-properties" id="ref-for-layout-definition-child-input-properties③">child input
properties</a>.</p>
       <li data-md>
        <p>Let <var>layoutChild</var> be a new <code class="idl"><a data-link-type="idl" href="#layoutchild" id="ref-for-layoutchild②④">LayoutChild</a></code> with internal slot(s):</p>
        <ul>
         <li data-md>
          <p><code class="idl"><a data-link-type="idl" href="#dom-layoutchild-box-slot" id="ref-for-dom-layoutchild-box-slot②">[[box]]</a></code> set to <var>box</var>.</p>
         <li data-md>
          <p><code class="idl"><a data-link-type="idl" href="#dom-layoutchild-stylemap-slot" id="ref-for-dom-layoutchild-stylemap-slot⑤">[[styleMap]]</a></code> set to a new <code class="idl"><a data-link-type="idl" href="https://drafts.css-houdini.org/css-typed-om-1/#stylepropertymapreadonly" id="ref-for-stylepropertymapreadonly⑦">StylePropertyMapReadOnly</a></code> populated with <em>only</em> the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#computed-value" id="ref-for-computed-value⑤">computed values</a> for properties listed in <var>childInputProperties</var>.</p>
        </ul>
       <li data-md>
        <p><a data-link-type="dfn" href="https://infra.spec.whatwg.org/#map-set" id="ref-for-map-set③">Set</a> <var>layoutChildMap</var>[<var>workletGlobalScope</var>] to <var>layoutChild</var>.</p>
      </ol>
     <li data-md>
      <p>Let <var>layoutChild</var> be the result of <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#map-get" id="ref-for-map-get①">get</a> <var>layoutChildMap</var>[<var>workletGlobalScope</var>].</p>
     <li data-md>
      <p>Set <var>layoutChild</var>’s <code class="idl"><a data-link-type="idl" href="#dom-layoutchild-unique-id-slot" id="ref-for-dom-layoutchild-unique-id-slot②">[[unique id]]</a></code> internal slot to <var>uniqueId</var>.</p>
     <li data-md>
      <p>Return <var>layoutChild</var>.</p>
    </ol>
   </div>
   <p>When a <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#box" id="ref-for-box①②">box</a> is inserted into the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#box tree" id="ref-for-box tree④">box tree</a> the user agent <em>may</em> pre-populate the <code class="idl"><a data-link-type="idl" href="#dom-box-layoutchildmap-slot" id="ref-for-dom-box-layoutchildmap-slot①">[[layoutChildMap]]</a></code> for all <code class="idl"><a data-link-type="idl" href="#layoutworkletglobalscope" id="ref-for-layoutworkletglobalscope⑦">LayoutWorkletGlobalScope</a></code>s.</p>
   <p>When a <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#box" id="ref-for-box①③">box</a> is removed from the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#box tree" id="ref-for-box tree⑤">box tree</a> the user agent <em>must</em> clear the <code class="idl"><a data-link-type="idl" href="#dom-box-layoutchildmap-slot" id="ref-for-dom-box-layoutchildmap-slot②">[[layoutChildMap]]</a></code>.</p>
   <p>The user agent <em>must</em> clear the <code class="idl"><a data-link-type="idl" href="#dom-box-layoutchildmap-slot" id="ref-for-dom-box-layoutchildmap-slot③">[[layoutChildMap]]</a></code> internal slot every 1000 layout
passes.</p>
   <p class="note" role="note"><span>Note:</span> The above rule exists to ensure that web developers do not rely on being able to store
    non-regeneratable state on the <code class="idl"><a data-link-type="idl" href="#layoutchild" id="ref-for-layoutchild②⑤">LayoutChild</a></code> object.
    The 1000 limit was picked as a high upper bound, this limit may improve (downwards) over time.</p>
   <div class="algorithm" data-algorithm="update a layout child style">
     When the user agent wants to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="update-a-layout-child-style">update a layout child style</dfn> given <var>box</var>, it <em>must</em> run the following steps: 
    <ol>
     <li data-md>
      <p>Assert that:</p>
      <ul>
       <li data-md>
        <p><var>box</var> is currently attached to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#box tree" id="ref-for-box tree⑥">box tree</a>.</p>
      </ul>
     <li data-md>
      <p>If <var>box</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#containing-block" id="ref-for-containing-block②">containing block</a> is not a <a data-link-type="dfn" href="#layout-api-container" id="ref-for-layout-api-container⑨">layout API container</a>, abort all these
steps.</p>
     <li data-md>
      <p>Let <var>layoutChildMap</var> be <var>box</var>’s <code class="idl"><a data-link-type="idl" href="#dom-box-layoutchildmap-slot" id="ref-for-dom-box-layoutchildmap-slot④">[[layoutChildMap]]</a></code>.</p>
     <li data-md>
      <p><a data-link-type="dfn" href="https://infra.spec.whatwg.org/#map-iterate" id="ref-for-map-iterate">For each</a> <var>layoutChild</var> in <var>layoutChildMap</var>:</p>
      <ol>
       <li data-md>
        <p><var>layoutChild</var>’s <code class="idl"><a data-link-type="idl" href="#dom-layoutchild-stylemap-slot" id="ref-for-dom-layoutchild-stylemap-slot⑥">[[styleMap]]</a></code> to null.</p>
      </ol>
    </ol>
   </div>
   <p>When the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#computed-value" id="ref-for-computed-value⑥">computed values</a> of <a data-link-type="dfn" href="#document-layout-definition-child-input-properties" id="ref-for-document-layout-definition-child-input-properties②">child input properties</a> for a <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#box" id="ref-for-box①④">box</a> changes the user agent must run the <a data-link-type="dfn" href="#update-a-layout-child-style" id="ref-for-update-a-layout-child-style">update a layout child style</a> algorithm.</p>
   <h3 class="heading settled" data-level="4.2" id="layout-fragments"><span class="secno">4.2. </span><span class="content">Layout Fragments</span><a class="self-link" href="#layout-fragments"></a></h3>
   <p>A <code class="idl"><a data-link-type="idl" href="#layoutfragment" id="ref-for-layoutfragment⑤">LayoutFragment</a></code> represents a CSS <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-3/#fragment" id="ref-for-fragment①">fragment</a> of a <code class="idl"><a data-link-type="idl" href="#layoutchild" id="ref-for-layoutchild②⑥">LayoutChild</a></code> after layout has occurred on
that child. This is produced by the <code class="idl"><a data-link-type="idl" href="#dom-layoutchild-layoutnextfragment" id="ref-for-dom-layoutchild-layoutnextfragment④">layoutNextFragment()</a></code> method.</p>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed⑤"><c- g>Exposed</c-></a>=<c- n>LayoutWorklet</c->]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="layoutfragment"><code><c- g>LayoutFragment</c-></code></dfn> {
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double"><c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="LayoutFragment" data-dfn-type="attribute" data-export data-readonly data-type="double" id="dom-layoutfragment-inlinesize"><code><c- g>inlineSize</c-></code></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①"><c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="LayoutFragment" data-dfn-type="attribute" data-export data-readonly data-type="double" id="dom-layoutfragment-blocksize"><code><c- g>blockSize</c-></code></dfn>;

    <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double②"><c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="LayoutFragment" data-dfn-type="attribute" data-export data-type="double" id="dom-layoutfragment-inlineoffset"><code><c- g>inlineOffset</c-></code></dfn>;
    <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double③"><c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="LayoutFragment" data-dfn-type="attribute" data-export data-type="double" id="dom-layoutfragment-blockoffset"><code><c- g>blockOffset</c-></code></dfn>;

    <c- b>readonly</c-> <c- b>attribute</c-> <c- b>any</c-> <dfn class="dfn-paneled idl-code" data-dfn-for="LayoutFragment" data-dfn-type="attribute" data-export data-readonly data-type="any" id="dom-layoutfragment-data"><code><c- g>data</c-></code></dfn>;

    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#childbreaktoken" id="ref-for-childbreaktoken①"><c- n>ChildBreakToken</c-></a>? <dfn class="dfn-paneled idl-code" data-dfn-for="LayoutFragment" data-dfn-type="attribute" data-export data-readonly data-type="ChildBreakToken?" id="dom-layoutfragment-breaktoken"><code><c- g>breakToken</c-></code></dfn>;
};
</pre>
   <p>The <code class="idl"><a data-link-type="idl" href="#layoutfragment" id="ref-for-layoutfragment⑥">LayoutFragment</a></code> has internal slot(s):</p>
   <ul>
    <li data-md>
     <p><dfn class="dfn-paneled idl-code" data-dfn-for="LayoutFragment" data-dfn-type="attribute" data-export id="dom-layoutfragment-unique-id-slot"><code>[[unique id]]</code></dfn> the <a data-link-type="dfn" href="#layout-api-context-unique-id" id="ref-for-layout-api-context-unique-id④">unique id</a> of the <a data-link-type="dfn" href="#layout-api-context" id="ref-for-layout-api-context③">layout api
   context</a> which produced this child fragment. This slot is used so that a <code class="idl"><a data-link-type="idl" href="#layoutfragment" id="ref-for-layoutfragment⑦">LayoutFragment</a></code> from a previous layout pass is invalid.</p>
   </ul>
   <hr>
   <p>The <code class="idl"><a data-link-type="idl" href="#layoutfragment" id="ref-for-layoutfragment⑧">LayoutFragment</a></code> has <code class="idl"><a data-link-type="idl" href="#dom-layoutfragment-inlinesize" id="ref-for-dom-layoutfragment-inlinesize">inlineSize</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-layoutfragment-blocksize" id="ref-for-dom-layoutfragment-blocksize">blockSize</a></code> attributes, which are set by the respective child’s layout algorithm. They represent the <b>border
box</b> size of the CSS <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-3/#fragment" id="ref-for-fragment②">fragment</a>, and are relative to the <a data-link-type="dfn" href="#current-layout" id="ref-for-current-layout④">current layout’s</a> writing mode.</p>
   <p>The <code class="idl"><a data-link-type="idl" href="#dom-layoutfragment-inlinesize" id="ref-for-dom-layoutfragment-inlinesize①">inlineSize</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-layoutfragment-blocksize" id="ref-for-dom-layoutfragment-blocksize①">blockSize</a></code> attributes cannot be changed. If
the <a data-link-type="dfn" href="#current-layout" id="ref-for-current-layout⑤">current layout</a> requires a different <code class="idl"><a data-link-type="idl" href="#dom-layoutfragment-inlinesize" id="ref-for-dom-layoutfragment-inlinesize②">inlineSize</a></code> or <code class="idl"><a data-link-type="idl" href="#dom-layoutfragment-blocksize" id="ref-for-dom-layoutfragment-blocksize②">blockSize</a></code> the author must perform <code class="idl"><a data-link-type="idl" href="#dom-layoutchild-layoutnextfragment" id="ref-for-dom-layoutchild-layoutnextfragment⑤">layoutNextFragment()</a></code> again with
different arguments in order to get different results.</p>
   <p>The author inside the current layout can position a resulting <code class="idl"><a data-link-type="idl" href="#layoutfragment" id="ref-for-layoutfragment⑨">LayoutFragment</a></code> by setting its <code class="idl"><a data-link-type="idl" href="#dom-layoutfragment-inlineoffset" id="ref-for-dom-layoutfragment-inlineoffset">inlineOffset</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-layoutfragment-blockoffset" id="ref-for-dom-layoutfragment-blockoffset">blockOffset</a></code> attributes. If not set by the
author they default to zero. The <code class="idl"><a data-link-type="idl" href="#dom-layoutfragment-inlineoffset" id="ref-for-dom-layoutfragment-inlineoffset①">inlineOffset</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-layoutfragment-blockoffset" id="ref-for-dom-layoutfragment-blockoffset①">blockOffset</a></code> attributes represent the position of the <code class="idl"><a data-link-type="idl" href="#layoutfragment" id="ref-for-layoutfragment①⓪">LayoutFragment</a></code> relative to its parent’s <b>border
box</b>, before transform or positioning (e.g. if a fragment is <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#relative-position" id="ref-for-relative-position">relatively positioned</a>) has
been applied.</p>
   <figure>
     <img alt="An example of position a fragment in different writing modes." src="img/layout-fragment-offsets.png" width="800"> 
    <figcaption> A simple visualization showing positioning a <code class="idl"><a data-link-type="idl" href="#layoutfragment" id="ref-for-layoutfragment①①">LayoutFragment</a></code> using <code class="idl"><a data-link-type="idl" href="#dom-layoutfragment-inlineoffset" id="ref-for-dom-layoutfragment-inlineoffset②">inlineOffset</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-layoutfragment-blockoffset" id="ref-for-dom-layoutfragment-blockoffset②">blockOffset</a></code> in different writing
        modes. </figcaption>
   </figure>
   <div class="example" id="example-b84555b2">
    <a class="self-link" href="#example-b84555b2"></a> The example below shows the basic usage of a <code class="idl"><a data-link-type="idl" href="#layoutfragment" id="ref-for-layoutfragment①②">LayoutFragment</a></code>. 
<pre class="lang-javascript highlight">registerLayout<c- p>(</c-><c- t>'example-layout-fragment'</c-><c- p>,</c-> <c- kr>class</c-> <c- p>{</c->
  async layout<c- p>(</c->children<c- p>,</c-> edges<c- p>,</c-> constraints<c- p>,</c-> styleMap<c- p>)</c-> <c- p>{</c->

    <c- c1>// You must perform layout to generate a fragment.</c->
    <c- kr>const</c-> fragment <c- o>=</c-> await child<c- p>.</c->layoutNextFragment<c- p>({});</c->

    <c- c1>// You can query the size of the fragment produced:</c->
    console<c- p>.</c->log<c- p>(</c->fragment<c- p>.</c->inlineSize<c- p>);</c->
    console<c- p>.</c->log<c- p>(</c->fragment<c- p>.</c->blockSize<c- p>);</c->

    <c- c1>// You can set the position of the fragment, e.g. this will set it to the</c->
    <c- c1>// top-left corner:</c->
    fragment<c- p>.</c->inlineOffset <c- o>=</c-> edges<c- p>.</c->inlineStart<c- p>;</c->
    fragment<c- p>.</c->blockOffset <c- o>=</c-> edges<c- p>.</c->blockStart<c- p>;</c->

    <c- c1>// Data may be passed from the child layout:</c->
    console<c- p>.</c->log<c- p>(</c->fragment<c- p>.</c->data<c- p>);</c->

    <c- c1>// If the child fragmented, you can use the breakToken to produce the next</c->
    <c- c1>// fragment in the chain.</c->
    <c- kr>const</c-> nextFragment <c- o>=</c-> await child<c- p>.</c->layoutNextFragment<c- p>({},</c-> fragment<c- p>.</c->breakToken<c- p>);</c->
  <c- p>}</c->
<c- p>});</c->
</pre>
   </div>
   <p>A <a data-link-type="dfn" href="#layout-api-container" id="ref-for-layout-api-container①⓪">layout API container</a> can communicate with other <a data-link-type="dfn" href="#layout-api-container" id="ref-for-layout-api-container①①">layout API containers</a> by using the <code class="idl"><a data-link-type="idl" href="#dom-layoutfragment-data" id="ref-for-dom-layoutfragment-data">data</a></code> attribute. This is set by the <code class="idl"><a data-link-type="idl" href="#dom-fragmentresultoptions-data" id="ref-for-dom-fragmentresultoptions-data">data</a></code> member in the <code class="idl"><a data-link-type="idl" href="#dictdef-fragmentresultoptions" id="ref-for-dictdef-fragmentresultoptions">FragmentResultOptions</a></code> dictionary.</p>
   <p>The <code class="idl"><a data-link-type="idl" href="#layoutfragment" id="ref-for-layoutfragment①③">LayoutFragment</a></code>'s <code class="idl"><a data-link-type="idl" href="#dom-layoutfragment-breaktoken" id="ref-for-dom-layoutfragment-breaktoken">breakToken</a></code> specifies where the <code class="idl"><a data-link-type="idl" href="#layoutchild" id="ref-for-layoutchild②⑦">LayoutChild</a></code> last
fragmented. If the <code class="idl"><a data-link-type="idl" href="#dom-layoutfragment-breaktoken" id="ref-for-dom-layoutfragment-breaktoken①">breakToken</a></code> is null the <code class="idl"><a data-link-type="idl" href="#layoutchild" id="ref-for-layoutchild②⑧">LayoutChild</a></code> wont produce any more <code class="idl"><a data-link-type="idl" href="#layoutfragment" id="ref-for-layoutfragment①④">LayoutFragment</a></code>s for that token chain. The <code class="idl"><a data-link-type="idl" href="#dom-layoutfragment-breaktoken" id="ref-for-dom-layoutfragment-breaktoken②">breakToken</a></code> can be passed to the <code class="idl"><a data-link-type="idl" href="#dom-layoutchild-layoutnextfragment" id="ref-for-dom-layoutchild-layoutnextfragment⑥">layoutNextFragment()</a></code> function to produce the next <code class="idl"><a data-link-type="idl" href="#layoutfragment" id="ref-for-layoutfragment①⑤">LayoutFragment</a></code> for a
particular child. The <code class="idl"><a data-link-type="idl" href="#dom-layoutfragment-breaktoken" id="ref-for-dom-layoutfragment-breaktoken③">breakToken</a></code> cannot be changed.
If the <a data-link-type="dfn" href="#current-layout" id="ref-for-current-layout⑥">current layout</a> requires a different <code class="idl"><a data-link-type="idl" href="#dom-layoutfragment-breaktoken" id="ref-for-dom-layoutfragment-breaktoken④">breakToken</a></code> the author must perform <code class="idl"><a data-link-type="idl" href="#dom-layoutchild-layoutnextfragment" id="ref-for-dom-layoutchild-layoutnextfragment⑦">layoutNextFragment()</a></code> again with different arguments.</p>
   <h3 class="heading settled" data-level="4.3" id="intrinsic-sizes"><span class="secno">4.3. </span><span class="content">Intrinsic Sizes</span><a class="self-link" href="#intrinsic-sizes"></a></h3>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed⑥"><c- g>Exposed</c-></a>=<c- n>LayoutWorklet</c->]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="intrinsicsizes"><code><c- g>IntrinsicSizes</c-></code></dfn> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double④"><c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="IntrinsicSizes" data-dfn-type="attribute" data-export data-readonly data-type="double" id="dom-intrinsicsizes-mincontentsize"><code><c- g>minContentSize</c-></code></dfn>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double⑤"><c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="IntrinsicSizes" data-dfn-type="attribute" data-export data-readonly data-type="double" id="dom-intrinsicsizes-maxcontentsize"><code><c- g>maxContentSize</c-></code></dfn>;
};
</pre>
   <p>A <code class="idl"><a data-link-type="idl" href="#intrinsicsizes" id="ref-for-intrinsicsizes①">IntrinsicSizes</a></code> object represents the <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#min-content" id="ref-for-min-content">min-content size</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-content" id="ref-for-max-content">max-content size</a> of a CSS <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#box" id="ref-for-box①⑤">box</a>. It has <code class="idl"><a data-link-type="idl" href="#dom-intrinsicsizes-mincontentsize" id="ref-for-dom-intrinsicsizes-mincontentsize">minContentSize</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-intrinsicsizes-maxcontentsize" id="ref-for-dom-intrinsicsizes-maxcontentsize">maxContentSize</a></code> attributes
which represent the <b>border box</b> min/max-content contribution of the <code class="idl"><a data-link-type="idl" href="#layoutchild" id="ref-for-layoutchild②⑨">LayoutChild</a></code> for the <a data-link-type="dfn" href="#current-layout" id="ref-for-current-layout⑦">current layout</a>. The attributes are relative to the inline direction of the <a data-link-type="dfn" href="#current-layout" id="ref-for-current-layout⑧">current layout’s</a> writing mode.</p>
   <p>The <code class="idl"><a data-link-type="idl" href="#dom-intrinsicsizes-mincontentsize" id="ref-for-dom-intrinsicsizes-mincontentsize①">minContentSize</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-intrinsicsizes-maxcontentsize" id="ref-for-dom-intrinsicsizes-maxcontentsize①">maxContentSize</a></code> cannot be changed. They
must not change for a <code class="idl"><a data-link-type="idl" href="#layoutchild" id="ref-for-layoutchild③⓪">LayoutChild</a></code> within the current layout pass.</p>
   <div class="example" id="example-d47b1d7d">
    <a class="self-link" href="#example-d47b1d7d"></a> The example below shows the border-box intrinsic sizes of two children. 
<pre class="lang-html highlight"><c- p>&lt;</c-><c- f>style</c-><c- p>></c->
<c- p>.</c-><c- nc>child-0</c-> <c- p>{</c->
  <c- k>width</c-><c- p>:</c-> <c- mi>380</c-><c- b>px</c-><c- p>;</c->
  <c- k>border</c-><c- p>:</c-> <c- kc>solid</c-> <c- mi>10</c-><c- b>px</c-><c- p>;</c->
<c- p>}</c->

<c- p>.</c-><c- nc>child-1</c-> <c- p>{</c->
  <c- k>border</c-><c- p>:</c-> <c- kc>solid</c-> <c- mi>5</c-><c- b>px</c-><c- p>;</c->
<c- p>}</c->

<c- p>.</c-><c- nc>box</c-> <c- p>{</c->
  <c- k>display</c-><c- p>:</c-> <c- nf>layout</c-><c- p>(</c-><c- n>intrinsic</c-><c- o>-</c-><c- n>sizes</c-><c- o>-</c-><c- n>example</c-><c- p>);</c->
  <c- k>font</c-><c- p>:</c-> <c- mi>25</c-><c- b>px</c-><c- o>/</c-><c- mi>1</c-> <c- n>Ahem</c-><c- p>;</c->
<c- p>}</c->
<c- p>&lt;/</c-><c- f>style</c-><c- p>></c->

<c- p>&lt;</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>"box"</c-><c- p>></c->
  <c- p>&lt;</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>"child-0"</c-><c- p>>&lt;/</c-><c- f>div</c-><c- p>></c->
  <c- p>&lt;</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>"child-1"</c-><c- p>></c->XXX XXXX<c- p>&lt;/</c-><c- f>div</c-><c- p>></c->
<c- p>&lt;/</c-><c- f>div</c-><c- p>></c->
</pre>
<pre class="lang-javascript highlight">registerLayout<c- p>(</c-><c- t>'intrinsic-sizes-example'</c-><c- p>,</c-> <c- kr>class</c-> <c- p>{</c->
    async intrinsicSizes<c- p>(</c->children<c- p>,</c-> edges<c- p>,</c-> styleMap<c- p>)</c-> <c- p>{</c->
      <c- kr>const</c-> childrenSizes <c- o>=</c-> await Promise<c- p>.</c->all<c- p>(</c->children<c- p>.</c->map<c- p>((</c->child<c- p>)</c-> <c- p>=></c-> <c- p>{</c->
          <c- k>return</c-> child<c- p>.</c->intrinsicSizes<c- p>();</c->
      <c- p>}));</c->

      childrenSizes<c- p>[</c-><c- mi>0</c-><c- p>].</c->minContentSize<c- p>;</c-> <c- c1>// 400, (380+10+10) child has a fixed size.</c->
      childrenSizes<c- p>[</c-><c- mi>0</c-><c- p>].</c->maxContentSize<c- p>;</c-> <c- c1>// 400, (380+10+10) child has a fixed size.</c->

      childrenSizes<c- p>[</c-><c- mi>1</c-><c- p>].</c->minContentSize<c- p>;</c-> <c- c1>// 100, size of "XXXX".</c->
      childrenSizes<c- p>[</c-><c- mi>1</c-><c- p>].</c->maxContentSize<c- p>;</c-> <c- c1>// 200, size of "XXX XXXX".</c->
    <c- p>}</c->

    layout<c- p>()</c-> <c- p>{}</c->
<c- p>});</c->
</pre>
   </div>
   <h3 class="heading settled" data-level="4.4" id="layout-constraints"><span class="secno">4.4. </span><span class="content">Layout Constraints</span><a class="self-link" href="#layout-constraints"></a></h3>
   <p>A <code class="idl"><a data-link-type="idl" href="#layoutconstraints" id="ref-for-layoutconstraints">LayoutConstraints</a></code> object is passed into the layout method which represents the all the
constraints for the <a data-link-type="dfn" href="#current-layout" id="ref-for-current-layout⑨">current layout</a> to perform layout within.</p>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed⑦"><c- g>Exposed</c-></a>=<c- n>LayoutWorklet</c->]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="layoutconstraints"><code><c- g>LayoutConstraints</c-></code></dfn> {
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double⑥"><c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="LayoutConstraints" data-dfn-type="attribute" data-export data-readonly data-type="double" id="dom-layoutconstraints-availableinlinesize"><code><c- g>availableInlineSize</c-></code></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double⑦"><c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="LayoutConstraints" data-dfn-type="attribute" data-export data-readonly data-type="double" id="dom-layoutconstraints-availableblocksize"><code><c- g>availableBlockSize</c-></code></dfn>;

    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double⑧"><c- b>double</c-></a>? <dfn class="dfn-paneled idl-code" data-dfn-for="LayoutConstraints" data-dfn-type="attribute" data-export data-readonly data-type="double?" id="dom-layoutconstraints-fixedinlinesize"><code><c- g>fixedInlineSize</c-></code></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double⑨"><c- b>double</c-></a>? <dfn class="dfn-paneled idl-code" data-dfn-for="LayoutConstraints" data-dfn-type="attribute" data-export data-readonly data-type="double?" id="dom-layoutconstraints-fixedblocksize"><code><c- g>fixedBlockSize</c-></code></dfn>;

    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①⓪"><c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="LayoutConstraints" data-dfn-type="attribute" data-export data-readonly data-type="double" id="dom-layoutconstraints-percentageinlinesize"><code><c- g>percentageInlineSize</c-></code></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①①"><c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="LayoutConstraints" data-dfn-type="attribute" data-export data-readonly data-type="double" id="dom-layoutconstraints-percentageblocksize"><code><c- g>percentageBlockSize</c-></code></dfn>;

    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①②"><c- b>double</c-></a>? <dfn class="dfn-paneled idl-code" data-dfn-for="LayoutConstraints" data-dfn-type="attribute" data-export data-readonly data-type="double?" id="dom-layoutconstraints-blockfragmentationoffset"><code><c- g>blockFragmentationOffset</c-></code></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#enumdef-blockfragmentationtype" id="ref-for-enumdef-blockfragmentationtype"><c- n>BlockFragmentationType</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="LayoutConstraints" data-dfn-type="attribute" data-export data-readonly data-type="BlockFragmentationType" id="dom-layoutconstraints-blockfragmentationtype"><code><c- g>blockFragmentationType</c-></code></dfn>;

    <c- b>readonly</c-> <c- b>attribute</c-> <c- b>any</c-> <dfn class="dfn-paneled idl-code" data-dfn-for="LayoutConstraints" data-dfn-type="attribute" data-export data-readonly data-type="any" id="dom-layoutconstraints-data"><code><c- g>data</c-></code></dfn>;
};

<c- b>enum</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="enum" data-export id="enumdef-blockfragmentationtype"><code><c- g>BlockFragmentationType</c-></code></dfn> { <dfn class="idl-code" data-dfn-for="BlockFragmentationType" data-dfn-type="enum-value" data-export id="dom-blockfragmentationtype-none"><code><c- s>"none"</c-></code><a class="self-link" href="#dom-blockfragmentationtype-none"></a></dfn>, <dfn class="idl-code" data-dfn-for="BlockFragmentationType" data-dfn-type="enum-value" data-export id="dom-blockfragmentationtype-page"><code><c- s>"page"</c-></code><a class="self-link" href="#dom-blockfragmentationtype-page"></a></dfn>, <dfn class="idl-code" data-dfn-for="BlockFragmentationType" data-dfn-type="enum-value" data-export id="dom-blockfragmentationtype-column"><code><c- s>"column"</c-></code><a class="self-link" href="#dom-blockfragmentationtype-column"></a></dfn>, <dfn class="idl-code" data-dfn-for="BlockFragmentationType" data-dfn-type="enum-value" data-export id="dom-blockfragmentationtype-region"><code><c- s>"region"</c-></code><a class="self-link" href="#dom-blockfragmentationtype-region"></a></dfn> };
</pre>
   <p>The <code class="idl"><a data-link-type="idl" href="#layoutconstraints" id="ref-for-layoutconstraints①">LayoutConstraints</a></code> object has <code class="idl"><a data-link-type="idl" href="#dom-layoutconstraints-availableinlinesize" id="ref-for-dom-layoutconstraints-availableinlinesize">availableInlineSize</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-layoutconstraints-availableblocksize" id="ref-for-dom-layoutconstraints-availableblocksize">availableBlockSize</a></code> attributes. This represents the <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#available" id="ref-for-available">available space</a> for the <a data-link-type="dfn" href="#current-layout" id="ref-for-current-layout①⓪">current layout</a> to respect.</p>
   <p class="note" role="note"><span>Note:</span> Some layouts may need to produce a <code class="idl"><a data-link-type="idl" href="#layoutfragment" id="ref-for-layoutfragment①⑥">LayoutFragment</a></code> which exceed this size. For example a <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#replaced-element" id="ref-for-replaced-element">replaced element</a>. The <a data-link-type="dfn" href="#parent-layout" id="ref-for-parent-layout">parent layout</a> should expect this to occur and deal with it
    appropriately.</p>
   <p>A <a data-link-type="dfn" href="#parent-layout" id="ref-for-parent-layout①">parent layout</a> may require the <a data-link-type="dfn" href="#current-layout" id="ref-for-current-layout①①">current layout</a> to be exactly a particular size. If the <code class="idl"><a data-link-type="idl" href="#dom-layoutconstraints-fixedinlinesize" id="ref-for-dom-layoutconstraints-fixedinlinesize">fixedInlineSize</a></code> or <code class="idl"><a data-link-type="idl" href="#dom-layoutconstraints-fixedblocksize" id="ref-for-dom-layoutconstraints-fixedblocksize">fixedBlockSize</a></code> are specified the <a data-link-type="dfn" href="#current-layout" id="ref-for-current-layout①②">current layout</a> should produce a <code class="idl"><a data-link-type="idl" href="#layoutfragment" id="ref-for-layoutfragment①⑦">LayoutFragment</a></code> with a the specified size in the appropriate
direction.</p>
   <p>The <code class="idl"><a data-link-type="idl" href="#layoutconstraints" id="ref-for-layoutconstraints②">LayoutConstraints</a></code> object has <code class="idl"><a data-link-type="idl" href="#dom-layoutconstraints-percentageinlinesize" id="ref-for-dom-layoutconstraints-percentageinlinesize">percentageInlineSize</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-layoutconstraints-percentageblocksize" id="ref-for-dom-layoutconstraints-percentageblocksize">percentageBlockSize</a></code> attributes. These represent the size that percentages
should be resolved against while performing layout.</p>
   <p>The <code class="idl"><a data-link-type="idl" href="#layoutconstraints" id="ref-for-layoutconstraints③">LayoutConstraints</a></code> has a <code class="idl"><a data-link-type="idl" href="#dom-layoutconstraints-blockfragmentationtype" id="ref-for-dom-layoutconstraints-blockfragmentationtype">blockFragmentationType</a></code> attribute. The <a data-link-type="dfn" href="#current-layout" id="ref-for-current-layout①③">current layout</a> should produce a <code class="idl"><a data-link-type="idl" href="#layoutfragment" id="ref-for-layoutfragment①⑧">LayoutFragment</a></code> which fragments at the <code class="idl"><a data-link-type="idl" href="#dom-layoutconstraints-blockfragmentationoffset" id="ref-for-dom-layoutconstraints-blockfragmentationoffset">blockFragmentationOffset</a></code> if possible.</p>
   <p>The <a data-link-type="dfn" href="#current-layout" id="ref-for-current-layout①④">current layout</a> can choose not to fragment a <code class="idl"><a data-link-type="idl" href="#layoutchild" id="ref-for-layoutchild③①">LayoutChild</a></code> based on the <code class="idl"><a data-link-type="idl" href="#dom-layoutconstraints-blockfragmentationtype" id="ref-for-dom-layoutconstraints-blockfragmentationtype①">blockFragmentationType</a></code>, for example if the child has a property like <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-break-3/#propdef-break-inside" id="ref-for-propdef-break-inside">break-inside: avoid-page;</a>.</p>
   <div class="example" id="example-a59e8196">
    <a class="self-link" href="#example-a59e8196"></a> The example below shows the basic usage of the <code class="idl"><a data-link-type="idl" href="#layoutconstraints" id="ref-for-layoutconstraints④">LayoutConstraints</a></code> object. 
<pre class="lang-javascript highlight"><c- c1>// The class below is registered with a "block-like" sizingMode, and can use the fixedInlineSize,</c->
<c- c1>// fixedBlockSize attributes.</c->
registerLayout<c- p>(</c-><c- t>'layout-constraints-example'</c-><c- p>,</c-> <c- kr>class</c-> <c- p>{</c->
    async layout<c- p>(</c->children<c- p>,</c-> edges<c- p>,</c-> constraints<c- p>,</c-> styleMap<c- p>)</c-> <c- p>{</c->

        <c- c1>// Calculate the available size.</c->
        <c- kr>const</c-> availableInlineSize <c- o>=</c-> constraints<c- p>.</c->fixedInlineSize <c- o>-</c-> edges<c- p>.</c->inline<c- p>;</c->
        <c- kr>const</c-> availableBlockSize <c- o>=</c-> constraints<c- p>.</c->fixedBlockSize <c- o>?</c->
            constraints<c- p>.</c->fixedBlockSize <c- o>-</c-> edges<c- p>.</c->inline <c- o>:</c-> <c- kc>null</c-><c- p>;</c->

        <c- c1>// Web developers should resolve any percentages against the percentage sizes.</c->
        <c- kr>const</c-> value <c- o>=</c-> constraints<c- p>.</c->percentageInlineSize <c- o>*</c-> <c- mf>0.5</c-><c- p>;</c->

    <c- p>}</c->
<c- p>});</c->
</pre>
   </div>
   <hr>
   <p>The <a data-link-type="dfn" href="#create-a-layout-constraints-object" id="ref-for-create-a-layout-constraints-object">create a layout constraints object</a> algorithm is used to create the <code class="idl"><a data-link-type="idl" href="#layoutconstraints" id="ref-for-layoutconstraints⑤">LayoutConstraints</a></code> object. Depending on the <code class="idl"><a data-link-type="idl" href="#dom-layoutoptions-sizing" id="ref-for-dom-layoutoptions-sizing">sizing</a></code> it will either pre-calculate the <code class="idl"><a data-link-type="idl" href="#dom-layoutconstraints-fixedinlinesize" id="ref-for-dom-layoutconstraints-fixedinlinesize①">fixedInlineSize</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-layoutconstraints-fixedblocksize" id="ref-for-dom-layoutconstraints-fixedblocksize①">fixedBlockSize</a></code> upfront.</p>
   <div class="algorithm" data-algorithm="create a layout constraints object">
     When the user agent wants to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="create-a-layout-constraints-object">create a layout constraints object</dfn> given <var>sizingMode</var>, <var>box</var>,
and <var>internalLayoutConstraints</var>, it <em>must</em> run the following steps: 
    <ol>
     <li data-md>
      <p>If <var>sizingMode</var> is <code>"block-like"</code> then:</p>
      <ol>
       <li data-md>
        <p>Let <var>fixedInlineSize</var> be the result of calculating <var>box</var>’s <b>border-box</b> <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-size" id="ref-for-inline-size">inline size</a> (relative to <var>box</var>’s writing mode) exactly like block containers do.</p>
       <li data-md>
        <p>Let <var>fixedBlockSize</var> be null if <var>box</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-size" id="ref-for-block-size">block size</a> is unable to be calculated at this
stage, (e.g. <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-size" id="ref-for-block-size①">block size</a> is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto">auto</a>), otherwise the result of calculating <var>box</var>’s <b>border-box</b> <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-size" id="ref-for-block-size②">block size</a> exactly like block containers do.</p>
       <li data-md>
        <p>Return a new <code class="idl"><a data-link-type="idl" href="#layoutconstraints" id="ref-for-layoutconstraints⑥">LayoutConstraints</a></code> object with:</p>
        <ul>
         <li data-md>
          <p><code class="idl"><a data-link-type="idl" href="#dom-layoutconstraints-fixedinlinesize" id="ref-for-dom-layoutconstraints-fixedinlinesize②">fixedInlineSize</a></code>, and <code class="idl"><a data-link-type="idl" href="#dom-layoutconstraints-availableinlinesize" id="ref-for-dom-layoutconstraints-availableinlinesize①">availableInlineSize</a></code> set to <var>fixedInlineSize</var>.</p>
         <li data-md>
          <p><code class="idl"><a data-link-type="idl" href="#dom-layoutconstraints-percentageinlinesize" id="ref-for-dom-layoutconstraints-percentageinlinesize①">percentageInlineSize</a></code> set to <var>internalLayoutConstraints</var>’
percentage resolution size in the inline axis (relative to <var>box</var>’s writing mode).</p>
         <li data-md>
          <p><code class="idl"><a data-link-type="idl" href="#dom-layoutconstraints-fixedblocksize" id="ref-for-dom-layoutconstraints-fixedblocksize②">fixedBlockSize</a></code> set to <var>fixedBlockSize</var>.</p>
         <li data-md>
          <p><code class="idl"><a data-link-type="idl" href="#dom-layoutconstraints-availableblocksize" id="ref-for-dom-layoutconstraints-availableblocksize①">availableBlockSize</a></code> set to <var>fixedBlockSize</var> if not null,
otherwise <var>internalLayoutConstraints</var>’ <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#available" id="ref-for-available①">available space</a> in the block axis
(relative to <var>box</var>’s writing mode).</p>
         <li data-md>
          <p><code class="idl"><a data-link-type="idl" href="#dom-layoutconstraints-percentageblocksize" id="ref-for-dom-layoutconstraints-percentageblocksize①">percentageBlockSize</a></code> set to <var>internalLayoutConstraints</var>’
percentage resolution size in the block axis (relative to <var>box</var>’s writing mode).</p>
        </ul>
      </ol>
     <li data-md>
      <p>If <var>sizingMode</var> is <code>"manual"</code> then:</p>
      <ol>
       <li data-md>
        <p>Return a new <code class="idl"><a data-link-type="idl" href="#layoutconstraints" id="ref-for-layoutconstraints⑦">LayoutConstraints</a></code> object with:</p>
        <ul>
         <li data-md>
          <p><code class="idl"><a data-link-type="idl" href="#dom-layoutconstraints-fixedinlinesize" id="ref-for-dom-layoutconstraints-fixedinlinesize③">fixedInlineSize</a></code>/<code class="idl"><a data-link-type="idl" href="#dom-layoutconstraints-fixedblocksize" id="ref-for-dom-layoutconstraints-fixedblocksize③">fixedBlockSize</a></code> set to <var>internalLayoutConstraints</var>’ fixed inline/block size (relative to <var>box</var>’s writing
mode) imposed by the <a data-link-type="dfn" href="#parent-layout" id="ref-for-parent-layout②">parent layout</a>. Either may be null.</p>
          <p class="note" role="note"><span>Note:</span> See <a href="#interaction-sizing">§ 5.1 Sizing</a> for different scenarios when this can occur.</p>
         <li data-md>
          <p><code class="idl"><a data-link-type="idl" href="#dom-layoutconstraints-availableinlinesize" id="ref-for-dom-layoutconstraints-availableinlinesize②">availableInlineSize</a></code>/<code class="idl"><a data-link-type="idl" href="#dom-layoutconstraints-availableblocksize" id="ref-for-dom-layoutconstraints-availableblocksize②">availableBlockSize</a></code> set
to <var>internalLayoutConstraints</var>’ <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#available" id="ref-for-available②">available space</a>.</p>
         <li data-md>
          <p><code class="idl"><a data-link-type="idl" href="#dom-layoutconstraints-percentageinlinesize" id="ref-for-dom-layoutconstraints-percentageinlinesize②">percentageInlineSize</a></code>/<code class="idl"><a data-link-type="idl" href="#dom-layoutconstraints-percentageblocksize" id="ref-for-dom-layoutconstraints-percentageblocksize②">percentageBlockSize</a></code> set to <var>internalLayoutConstraints</var>’ percentage resolution size.</p>
        </ul>
      </ol>
    </ol>
   </div>
   <h4 class="heading settled" data-level="4.4.1" id="layout-constraints-children"><span class="secno">4.4.1. </span><span class="content">Constraints for Layout Children</span><a class="self-link" href="#layout-constraints-children"></a></h4>
   <p>The <code class="idl"><a data-link-type="idl" href="#dictdef-layoutconstraintsoptions" id="ref-for-dictdef-layoutconstraintsoptions①">LayoutConstraintsOptions</a></code> dictionary represents the set of constraints which can be passed to
a <code class="idl"><a data-link-type="idl" href="#layoutchild" id="ref-for-layoutchild③②">LayoutChild</a></code> to produce a <code class="idl"><a data-link-type="idl" href="#layoutfragment" id="ref-for-layoutfragment①⑨">LayoutFragment</a></code>.</p>
<pre class="idl highlight def"><c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-layoutconstraintsoptions"><code><c- g>LayoutConstraintsOptions</c-></code></dfn> {
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①③"><c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="LayoutConstraintsOptions" data-dfn-type="dict-member" data-export data-type="double " id="dom-layoutconstraintsoptions-availableinlinesize"><code><c- g>availableInlineSize</c-></code></dfn>;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①④"><c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="LayoutConstraintsOptions" data-dfn-type="dict-member" data-export data-type="double " id="dom-layoutconstraintsoptions-availableblocksize"><code><c- g>availableBlockSize</c-></code></dfn>;

    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①⑤"><c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="LayoutConstraintsOptions" data-dfn-type="dict-member" data-export data-type="double " id="dom-layoutconstraintsoptions-fixedinlinesize"><code><c- g>fixedInlineSize</c-></code></dfn>;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①⑥"><c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="LayoutConstraintsOptions" data-dfn-type="dict-member" data-export data-type="double " id="dom-layoutconstraintsoptions-fixedblocksize"><code><c- g>fixedBlockSize</c-></code></dfn>;

    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①⑦"><c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="LayoutConstraintsOptions" data-dfn-type="dict-member" data-export data-type="double " id="dom-layoutconstraintsoptions-percentageinlinesize"><code><c- g>percentageInlineSize</c-></code></dfn>;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①⑧"><c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="LayoutConstraintsOptions" data-dfn-type="dict-member" data-export data-type="double " id="dom-layoutconstraintsoptions-percentageblocksize"><code><c- g>percentageBlockSize</c-></code></dfn>;

    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①⑨"><c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="LayoutConstraintsOptions" data-dfn-type="dict-member" data-export data-type="double " id="dom-layoutconstraintsoptions-blockfragmentationoffset"><code><c- g>blockFragmentationOffset</c-></code><a class="self-link" href="#dom-layoutconstraintsoptions-blockfragmentationoffset"></a></dfn>;
    <a class="n" data-link-type="idl-name" href="#enumdef-blockfragmentationtype" id="ref-for-enumdef-blockfragmentationtype①"><c- n>BlockFragmentationType</c-></a> <dfn class="idl-code" data-default="&quot;none&quot;" data-dfn-for="LayoutConstraintsOptions" data-dfn-type="dict-member" data-export data-type="BlockFragmentationType " id="dom-layoutconstraintsoptions-blockfragmentationtype"><code><c- g>blockFragmentationType</c-></code><a class="self-link" href="#dom-layoutconstraintsoptions-blockfragmentationtype"></a></dfn> = "none";

    <c- b>any</c-> <dfn class="dfn-paneled idl-code" data-dfn-for="LayoutConstraintsOptions" data-dfn-type="dict-member" data-export data-type="any " id="dom-layoutconstraintsoptions-data"><code><c- g>data</c-></code></dfn>;
};
</pre>
   <p class="note" role="note"><span>Note:</span> The <a data-link-type="dfn" href="#translate-a-layoutconstraintsoptions-to-internal-constraints" id="ref-for-translate-a-layoutconstraintsoptions-to-internal-constraints">translate a LayoutConstraintsOptions to internal constraints</a> describes how to convert
    a <code class="idl"><a data-link-type="idl" href="#dictdef-layoutconstraintsoptions" id="ref-for-dictdef-layoutconstraintsoptions②">LayoutConstraintsOptions</a></code> object into a user agents internal representation.</p>
   <div class="algorithm" data-algorithm="translate a LayoutConstraintsOptions to internal constraints">
     When the user agent wants to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="translate-a-layoutconstraintsoptions-to-internal-constraints">translate a LayoutConstraintsOptions to internal constraints</dfn> given <var>options</var>, it <em>must</em> run the following steps: 
    <ol>
     <li data-md>
      <p>Let the <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#available" id="ref-for-available③">available space</a> in the inline direction (with respect to the <a data-link-type="dfn" href="#current-layout" id="ref-for-current-layout①⑤">current layout</a>,
be the result of:</p>
      <ul>
       <li data-md>
        <p>If <var>options</var>’ <code class="idl"><a data-link-type="idl" href="#dom-layoutconstraintsoptions-availableinlinesize" id="ref-for-dom-layoutconstraintsoptions-availableinlinesize">availableInlineSize</a></code> is not null, and <code class="idl"><a data-link-type="idl" href="#dom-layoutconstraintsoptions-availableinlinesize" id="ref-for-dom-layoutconstraintsoptions-availableinlinesize①">availableInlineSize</a></code> is greater than zero, let the result be <code class="idl"><a data-link-type="idl" href="#dom-layoutconstraintsoptions-availableinlinesize" id="ref-for-dom-layoutconstraintsoptions-availableinlinesize②">availableInlineSize</a></code>.</p>
       <li data-md>
        <p>Otherwhise, let the result be zero.</p>
      </ul>
     <li data-md>
      <p>Let the <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#available" id="ref-for-available④">available space</a> in the block direction (with respect to the <a data-link-type="dfn" href="#current-layout" id="ref-for-current-layout①⑥">current layout</a>),
be the result of:</p>
      <ul>
       <li data-md>
        <p>If <var>options</var>’ <code class="idl"><a data-link-type="idl" href="#dom-layoutconstraintsoptions-availableblocksize" id="ref-for-dom-layoutconstraintsoptions-availableblocksize">availableBlockSize</a></code> is not null, and <code class="idl"><a data-link-type="idl" href="#dom-layoutconstraintsoptions-availableblocksize" id="ref-for-dom-layoutconstraintsoptions-availableblocksize①">availableBlockSize</a></code> is greater than zero, let the result be <code class="idl"><a data-link-type="idl" href="#dom-layoutconstraintsoptions-availableblocksize" id="ref-for-dom-layoutconstraintsoptions-availableblocksize②">availableBlockSize</a></code>.</p>
       <li data-md>
        <p>Otherwhise, let the result be zero.</p>
      </ul>
     <li data-md>
      <p>Let the override size in the inline direction (with respect to the <a data-link-type="dfn" href="#current-layout" id="ref-for-current-layout①⑦">current layout</a>, be the
result of:</p>
      <ul>
       <li data-md>
        <p>Let the result be <var>options</var>’ <code class="idl"><a data-link-type="idl" href="#dom-layoutconstraintsoptions-fixedinlinesize" id="ref-for-dom-layoutconstraintsoptions-fixedinlinesize">fixedInlineSize</a></code>.</p>
      </ul>
      <p class="note" role="note"><span>Note:</span> If the <code class="idl"><a data-link-type="idl" href="#dom-layoutconstraintsoptions-fixedinlinesize" id="ref-for-dom-layoutconstraintsoptions-fixedinlinesize①">fixedInlineSize</a></code> is null, no override size is
    applied.</p>
     <li data-md>
      <p>Let the override size in the block direction (with respect to the <a data-link-type="dfn" href="#current-layout" id="ref-for-current-layout①⑧">current layout</a>, be the
result of:</p>
      <ul>
       <li data-md>
        <p>Let the result be <var>options</var>’ <code class="idl"><a data-link-type="idl" href="#dom-layoutconstraintsoptions-fixedblocksize" id="ref-for-dom-layoutconstraintsoptions-fixedblocksize">fixedBlockSize</a></code>.</p>
      </ul>
      <p class="note" role="note"><span>Note:</span> If the <code class="idl"><a data-link-type="idl" href="#dom-layoutconstraintsoptions-fixedblocksize" id="ref-for-dom-layoutconstraintsoptions-fixedblocksize①">fixedBlockSize</a></code> is null, no override size is
    applied.</p>
     <li data-md>
      <p>Let the percentage resultion size in the inline direction (with respect to the <a data-link-type="dfn" href="#current-layout" id="ref-for-current-layout①⑨">current
layout</a>, be the result of:</p>
      <ul>
       <li data-md>
        <p>If <var>options</var>’ <code class="idl"><a data-link-type="idl" href="#dom-layoutconstraintsoptions-percentageinlinesize" id="ref-for-dom-layoutconstraintsoptions-percentageinlinesize">percentageInlineSize</a></code> is not null, and <code class="idl"><a data-link-type="idl" href="#dom-layoutconstraintsoptions-percentageinlinesize" id="ref-for-dom-layoutconstraintsoptions-percentageinlinesize①">percentageInlineSize</a></code> is greater than zero, let the result
be <code class="idl"><a data-link-type="idl" href="#dom-layoutconstraintsoptions-percentageinlinesize" id="ref-for-dom-layoutconstraintsoptions-percentageinlinesize②">percentageInlineSize</a></code>.</p>
       <li data-md>
        <p>If <var>options</var>’ <code class="idl"><a data-link-type="idl" href="#dom-layoutconstraintsoptions-availableinlinesize" id="ref-for-dom-layoutconstraintsoptions-availableinlinesize③">availableInlineSize</a></code> is not null, and <code class="idl"><a data-link-type="idl" href="#dom-layoutconstraintsoptions-availableinlinesize" id="ref-for-dom-layoutconstraintsoptions-availableinlinesize④">availableInlineSize</a></code> is greater than zero, let the result be <code class="idl"><a data-link-type="idl" href="#dom-layoutconstraintsoptions-availableinlinesize" id="ref-for-dom-layoutconstraintsoptions-availableinlinesize⑤">availableInlineSize</a></code>.</p>
       <li data-md>
        <p>Otherwhise, let the result be zero.</p>
      </ul>
     <li data-md>
      <p>Let the percentage resultion size in the block direction (with respect to the <a data-link-type="dfn" href="#current-layout" id="ref-for-current-layout②⓪">current
layout</a>, be the result of:</p>
      <ul>
       <li data-md>
        <p>If <var>options</var>’ <code class="idl"><a data-link-type="idl" href="#dom-layoutconstraintsoptions-percentageblocksize" id="ref-for-dom-layoutconstraintsoptions-percentageblocksize">percentageBlockSize</a></code> is not null, and <code class="idl"><a data-link-type="idl" href="#dom-layoutconstraintsoptions-percentageblocksize" id="ref-for-dom-layoutconstraintsoptions-percentageblocksize①">percentageBlockSize</a></code> is greater than zero, let the result
be <code class="idl"><a data-link-type="idl" href="#dom-layoutconstraintsoptions-percentageblocksize" id="ref-for-dom-layoutconstraintsoptions-percentageblocksize②">percentageBlockSize</a></code>.</p>
       <li data-md>
        <p>If <var>options</var>’ <code class="idl"><a data-link-type="idl" href="#dom-layoutconstraintsoptions-availableblocksize" id="ref-for-dom-layoutconstraintsoptions-availableblocksize③">availableBlockSize</a></code> is not null, and <code class="idl"><a data-link-type="idl" href="#dom-layoutconstraintsoptions-availableblocksize" id="ref-for-dom-layoutconstraintsoptions-availableblocksize④">availableBlockSize</a></code> is greater than zero, let the result be <code class="idl"><a data-link-type="idl" href="#dom-layoutconstraintsoptions-availableblocksize" id="ref-for-dom-layoutconstraintsoptions-availableblocksize⑤">availableBlockSize</a></code>.</p>
       <li data-md>
        <p>Otherwhise, let the result be zero.</p>
      </ul>
     <li data-md>
      <p>If the <a data-link-type="dfn" href="#child-layout" id="ref-for-child-layout">child layout</a> is a <a data-link-type="dfn" href="#layout-api-container" id="ref-for-layout-api-container①②">layout API container</a>, then let the store the data (passed by <code class="idl"><a data-link-type="idl" href="#dom-layoutconstraints-data" id="ref-for-dom-layoutconstraints-data">data</a></code>) be the result of:</p>
      <ul>
       <li data-md>
        <p>Invoking <a data-link-type="dfn" href="https://html.spec.whatwg.org/#structuredserializeforstorage" id="ref-for-structuredserializeforstorage">StructuredSerializeForStorage</a> on <var>options</var>’ <code class="idl"><a data-link-type="idl" href="#dom-layoutconstraintsoptions-data" id="ref-for-dom-layoutconstraintsoptions-data">data</a></code>.</p>
      </ul>
    </ol>
   </div>
   <div class="example" id="example-00166d24">
    <a class="self-link" href="#example-00166d24"></a> The example below shows the basic usage of the <code class="idl"><a data-link-type="idl" href="#dictdef-layoutconstraintsoptions" id="ref-for-dictdef-layoutconstraintsoptions③">LayoutConstraintsOptions</a></code> dictionary. 
<pre class="lang-javascript highlight"><c- c1>// The class below is registered with a "block-like" sizingMode, and can use the</c->
<c- c1>// fixedInlineSize, fixedBlockSize attributes.</c->
registerLayout<c- p>(</c-><c- t>'child-layout-constraints-example'</c-><c- p>,</c-> <c- kr>class</c-> <c- p>{</c->
    async layout<c- p>(</c->children<c- p>,</c-> edges<c- p>,</c-> constraints<c- p>,</c-> styleMap<c- p>)</c-> <c- p>{</c->

        <c- c1>// The call below gives the child an "available" space. It will try and</c->
        <c- c1>// fit within this.</c->
        <c- kr>const</c-> fragment <c- o>=</c-> children<c- p>[</c-><c- mi>0</c-><c- p>].</c->layoutNextFragment<c- p>({</c->
            availableInlineSize<c- o>:</c-> <c- mi>100</c-><c- p>,</c->
            availableBlockSize<c- o>:</c-> <c- mi>200</c-><c- p>,</c->
        <c- p>});</c->

        <c- c1>// The call below gives the child a "fixed" size, it will be forced to</c->
        <c- c1>// this size ignoring any style set.</c->
        <c- kr>const</c-> fragment <c- o>=</c-> children<c- p>[</c-><c- mi>0</c-><c- p>].</c->layoutNextFragment<c- p>({</c->
            fixedInlineSize<c- o>:</c-> <c- mi>20</c-><c- p>,</c->
            fixedBlockSize<c- o>:</c-> <c- mi>30</c-><c- p>,</c->
        <c- p>});</c->

    <c- p>}</c->
<c- p>});</c->
</pre>
   </div>
   <h3 class="heading settled" data-level="4.5" id="breaking-and-fragmentation"><span class="secno">4.5. </span><span class="content">Breaking and Fragmentation</span><a class="self-link" href="#breaking-and-fragmentation"></a></h3>
   <p>A <code class="idl"><a data-link-type="idl" href="#layoutchild" id="ref-for-layoutchild③③">LayoutChild</a></code> can produce multiple <code class="idl"><a data-link-type="idl" href="#layoutfragment" id="ref-for-layoutfragment②⓪">LayoutFragment</a></code>s. A <code class="idl"><a data-link-type="idl" href="#layoutchild" id="ref-for-layoutchild③④">LayoutChild</a></code> may fragment in the
block direction if a <code class="idl"><a data-link-type="idl" href="#dom-layoutconstraints-blockfragmentationtype" id="ref-for-dom-layoutconstraints-blockfragmentationtype②">blockFragmentationType</a></code> is not none.  Additionally <code class="idl"><a data-link-type="idl" href="#layoutchild" id="ref-for-layoutchild③⑤">LayoutChild</a></code> which represents <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#inline-level" id="ref-for-inline-level②">inline-level</a> content, may fragment line by line if the <a data-link-type="dfn" href="#document-layout-definition-layout-options" id="ref-for-document-layout-definition-layout-options⑤">layout options'</a> <code class="idl"><a data-link-type="idl" href="#dom-layoutoptions-childdisplay" id="ref-for-dom-layoutoptions-childdisplay③">childDisplay</a></code> (set by <code>layoutOptions</code>) is <code>"normal"</code>.</p>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed⑧"><c- g>Exposed</c-></a>=<c- n>LayoutWorklet</c->]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="childbreaktoken"><code><c- g>ChildBreakToken</c-></code></dfn> {
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#enumdef-breaktype" id="ref-for-enumdef-breaktype"><c- n>BreakType</c-></a> <dfn class="idl-code" data-dfn-for="ChildBreakToken" data-dfn-type="attribute" data-export data-readonly data-type="BreakType" id="dom-childbreaktoken-breaktype"><code><c- g>breakType</c-></code><a class="self-link" href="#dom-childbreaktoken-breaktype"></a></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#layoutchild" id="ref-for-layoutchild③⑥"><c- n>LayoutChild</c-></a> <dfn class="idl-code" data-dfn-for="ChildBreakToken" data-dfn-type="attribute" data-export data-readonly data-type="LayoutChild" id="dom-childbreaktoken-child"><code><c- g>child</c-></code><a class="self-link" href="#dom-childbreaktoken-child"></a></dfn>;
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed⑨"><c- g>Exposed</c-></a>=<c- n>LayoutWorklet</c->]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="breaktoken"><code><c- g>BreakToken</c-></code></dfn> {
    <c- b>readonly</c-> <c- b>attribute</c-> <c- b>FrozenArray</c->&lt;<a class="n" data-link-type="idl-name" href="#childbreaktoken" id="ref-for-childbreaktoken②"><c- n>ChildBreakToken</c-></a>> <dfn class="idl-code" data-dfn-for="BreakToken" data-dfn-type="attribute" data-export data-readonly data-type="FrozenArray<ChildBreakToken>" id="dom-breaktoken-childbreaktokens"><code><c- g>childBreakTokens</c-></code><a class="self-link" href="#dom-breaktoken-childbreaktokens"></a></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <c- b>any</c-> <dfn class="idl-code" data-dfn-for="BreakToken" data-dfn-type="attribute" data-export data-readonly data-type="any" id="dom-breaktoken-data"><code><c- g>data</c-></code><a class="self-link" href="#dom-breaktoken-data"></a></dfn>;
};

<c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-breaktokenoptions"><code><c- g>BreakTokenOptions</c-></code></dfn> {
    <c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#childbreaktoken" id="ref-for-childbreaktoken③"><c- n>ChildBreakToken</c-></a>> <dfn class="dfn-paneled idl-code" data-dfn-for="BreakTokenOptions" data-dfn-type="dict-member" data-export data-type="sequence<ChildBreakToken> " id="dom-breaktokenoptions-childbreaktokens"><code><c- g>childBreakTokens</c-></code></dfn>;
    <c- b>any</c-> <dfn class="dfn-paneled idl-code" data-default="null" data-dfn-for="BreakTokenOptions" data-dfn-type="dict-member" data-export data-type="any " id="dom-breaktokenoptions-data"><code><c- g>data</c-></code></dfn> = <c- b>null</c->;
};

<c- b>enum</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="enum" data-export id="enumdef-breaktype"><code><c- g>BreakType</c-></code></dfn> { <dfn class="idl-code" data-dfn-for="BreakType" data-dfn-type="enum-value" data-export id="dom-breaktype-none"><code><c- s>"none"</c-></code><a class="self-link" href="#dom-breaktype-none"></a></dfn>, <dfn class="idl-code" data-dfn-for="BreakType" data-dfn-type="enum-value" data-export id="dom-breaktype-line"><code><c- s>"line"</c-></code><a class="self-link" href="#dom-breaktype-line"></a></dfn>, <dfn class="idl-code" data-dfn-for="BreakType" data-dfn-type="enum-value" data-export id="dom-breaktype-column"><code><c- s>"column"</c-></code><a class="self-link" href="#dom-breaktype-column"></a></dfn>, <dfn class="idl-code" data-dfn-for="BreakType" data-dfn-type="enum-value" data-export id="dom-breaktype-page"><code><c- s>"page"</c-></code><a class="self-link" href="#dom-breaktype-page"></a></dfn>, <dfn class="idl-code" data-dfn-for="BreakType" data-dfn-type="enum-value" data-export id="dom-breaktype-region"><code><c- s>"region"</c-></code><a class="self-link" href="#dom-breaktype-region"></a></dfn> };
</pre>
   <p>The <code class="idl"><a data-link-type="idl" href="#childbreaktoken" id="ref-for-childbreaktoken④">ChildBreakToken</a></code> has internal slot(s):</p>
   <ul>
    <li data-md>
     <p><dfn class="dfn-paneled idl-code" data-dfn-for="ChildBreakToken" data-dfn-type="attribute" data-export id="dom-childbreaktoken-unique-id-slot"><code>[[unique id]]</code></dfn> the <a data-link-type="dfn" href="#layout-api-context-unique-id" id="ref-for-layout-api-context-unique-id⑤">unique id</a> of the <a data-link-type="dfn" href="#layout-api-context" id="ref-for-layout-api-context④">layout api
   context</a> which produced this child break token. This slot is used so that a <code class="idl"><a data-link-type="idl" href="#childbreaktoken" id="ref-for-childbreaktoken⑤">ChildBreakToken</a></code> from a previous layout pass is invalid.</p>
   </ul>
   <hr>
   <p>A subsequent <code class="idl"><a data-link-type="idl" href="#layoutfragment" id="ref-for-layoutfragment②①">LayoutFragment</a></code> is produced by using the previous <code class="idl"><a data-link-type="idl" href="#layoutfragment" id="ref-for-layoutfragment②②">LayoutFragment</a></code>'s <code class="idl"><a data-link-type="idl" href="#dom-layoutfragment-breaktoken" id="ref-for-dom-layoutfragment-breaktoken⑤">breakToken</a></code>. This tells the <a data-link-type="dfn" href="#child-layout" id="ref-for-child-layout①">child layout</a> to produce a <code class="idl"><a data-link-type="idl" href="#layoutfragment" id="ref-for-layoutfragment②③">LayoutFragment</a></code> starting at the point encoded in the <code class="idl"><a data-link-type="idl" href="#childbreaktoken" id="ref-for-childbreaktoken⑥">ChildBreakToken</a></code>.</p>
   <h3 class="heading settled" data-level="4.6" id="edges"><span class="secno">4.6. </span><span class="content">Edges</span><a class="self-link" href="#edges"></a></h3>
   <p>A <code class="idl"><a data-link-type="idl" href="#layoutedges" id="ref-for-layoutedges">LayoutEdges</a></code> object is passed into the layout method. This represents the sum of all the <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/box.html#box-dimensions" id="ref-for-box-dimensions">box
model edges</a> (border, scrollbar, padding), for the current box which is being laid out.</p>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed①⓪"><c- g>Exposed</c-></a>=<c- n>LayoutWorklet</c->]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="layoutedges"><code><c- g>LayoutEdges</c-></code></dfn> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double②⓪"><c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="LayoutEdges" data-dfn-type="attribute" data-export data-readonly data-type="double" id="dom-layoutedges-inlinestart"><code><c- g>inlineStart</c-></code></dfn>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double②①"><c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="LayoutEdges" data-dfn-type="attribute" data-export data-readonly data-type="double" id="dom-layoutedges-inlineend"><code><c- g>inlineEnd</c-></code></dfn>;

  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double②②"><c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="LayoutEdges" data-dfn-type="attribute" data-export data-readonly data-type="double" id="dom-layoutedges-blockstart"><code><c- g>blockStart</c-></code></dfn>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double②③"><c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="LayoutEdges" data-dfn-type="attribute" data-export data-readonly data-type="double" id="dom-layoutedges-blockend"><code><c- g>blockEnd</c-></code></dfn>;

  // Convenience attributes for the sum in one direction.
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double②④"><c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="LayoutEdges" data-dfn-type="attribute" data-export data-readonly data-type="double" id="dom-layoutedges-inline"><code><c- g>inline</c-></code></dfn>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double②⑤"><c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="LayoutEdges" data-dfn-type="attribute" data-export data-readonly data-type="double" id="dom-layoutedges-block"><code><c- g>block</c-></code></dfn>;
};
</pre>
   <p>Each of the accessors represents the width in CSS pixels of an edge in each of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#abstract-dimensions" id="ref-for-abstract-dimensions">abstract
dimensions</a> (<code class="idl"><a data-link-type="idl" href="#dom-layoutedges-inlinestart" id="ref-for-dom-layoutedges-inlinestart">inlineStart</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-layoutedges-inlineend" id="ref-for-dom-layoutedges-inlineend">inlineEnd</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-layoutedges-blockstart" id="ref-for-dom-layoutedges-blockstart">blockStart</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-layoutedges-blockend" id="ref-for-dom-layoutedges-blockend">blockEnd</a></code>).</p>
   <p>The <code class="idl"><a data-link-type="idl" href="#dom-layoutedges-inline" id="ref-for-dom-layoutedges-inline">inline</a></code>, and <code class="idl"><a data-link-type="idl" href="#dom-layoutedges-block" id="ref-for-dom-layoutedges-block">block</a></code> on the <code class="idl"><a data-link-type="idl" href="#layoutedges" id="ref-for-layoutedges①">LayoutEdges</a></code> object are convenience
attributes which represent the sum in that direction.</p>
   <figure>
     <img alt="An example of layout edges." src="img/edges.png" width="800"> 
    <figcaption> A visualization showing the <code class="idl"><a data-link-type="idl" href="#layoutedges" id="ref-for-layoutedges②">LayoutEdges</a></code> object for a <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#box" id="ref-for-box①⑥">box</a> with different sized
        scrollbar, border, and padding. </figcaption>
   </figure>
   <div class="example" id="example-4ab22fb2">
    <a class="self-link" href="#example-4ab22fb2"></a> This example shows an node styled by CSS, and what its respective <code class="idl"><a data-link-type="idl" href="#layoutedges" id="ref-for-layoutedges③">LayoutEdges</a></code> could contain. 
<pre class="lang-html highlight"><c- p>&lt;</c-><c- f>style</c-><c- p>></c->
<c- p>.</c-><c- nc>container</c-> <c- p>{</c->
  <c- k>width</c-><c- p>:</c-> <c- mi>50</c-><c- b>px</c-><c- p>;</c->
  <c- k>height</c-><c- p>:</c-> <c- mi>50</c-><c- b>px</c-><c- p>;</c->
<c- p>}</c->

<c- p>.</c-><c- nc>box</c-> <c- p>{</c->
  <c- k>display</c-><c- p>:</c-> <c- nf>layout</c-><c- p>(</c-><c- n>box</c-><c- o>-</c-><c- kc>edges</c-><c- p>);</c->

  <c- k>padding</c-><c- p>:</c-> <c- mi>10</c-><c- b>%</c-><c- p>;</c->
  <c- k>border</c-><c- p>:</c-> <c- kc>solid</c-> <c- mi>2</c-><c- b>px</c-><c- p>;</c->
  <c- k>overflow-y</c-><c- p>:</c-> <c- kc>scroll</c-><c- p>;</c->
<c- p>}</c->
<c- p>&lt;/</c-><c- f>style</c-><c- p>></c->

<c- p>&lt;</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>"container"</c-><c- p>></c->
  <c- p>&lt;</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>"box"</c-><c- p>>&lt;/</c-><c- f>div</c-><c- p>></c->
<c- p>&lt;/</c-><c- f>div</c-><c- p>></c->
</pre>
<pre class="lang-javascript highlight">registerLayout<c- p>(</c-><c- t>'box-edges'</c-><c- p>,</c-> <c- kr>class</c-> <c- p>{</c->
    async layout<c- p>(</c->children<c- p>,</c-> edges<c- p>,</c-> constraints<c- p>,</c-> styleMap<c- p>,</c-> breakToken<c- p>)</c-> <c- p>{</c->
        edges<c- p>.</c->inlineStart<c- p>;</c-> <c- c1>// 2 + 5 (as 10% * 50px = 5px).</c->
        edges<c- p>.</c->blockEnd<c- p>;</c-> <c- c1>// 7 (2 + 5)</c->
        edges<c- p>.</c->inlineEnd<c- p>;</c-> <c- c1>// UA-dependent, due to scrollbar.</c->
                         <c- c1>//  Could be 2 + 5 + 0 or 2 + 5 + 16 for example.</c->
        edges<c- p>.</c->block<c- p>;</c-> <c- c1>// 14 (2 + 5 + 5 + 2).</c->
    <c- p>}</c->
<c- p>}</c->
</pre>
   </div>
   <h2 class="heading settled" data-level="5" id="interactions-with-other-modules"><span class="secno">5. </span><span class="content">Interactions with other Modules</span><a class="self-link" href="#interactions-with-other-modules"></a></h2>
   <p>This section describes how other CSS modules interact with the CSS Layout API.</p>
   <h3 class="heading settled" data-level="5.1" id="interaction-sizing"><span class="secno">5.1. </span><span class="content">Sizing</span><a class="self-link" href="#interaction-sizing"></a></h3>
   <p>User agents must use the <code class="idl"><a data-link-type="idl" href="#layoutconstraints" id="ref-for-layoutconstraints⑧">LayoutConstraints</a></code> object to communicate to the <a data-link-type="dfn" href="#current-layout" id="ref-for-current-layout②①">current layout</a> the
size they would like the fragment to be.</p>
   <p>If the user agent wishes to force a size on the box, it can use the <code class="idl"><a data-link-type="idl" href="#dom-layoutconstraints-fixedinlinesize" id="ref-for-dom-layoutconstraints-fixedinlinesize④">fixedInlineSize</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-layoutconstraints-fixedblocksize" id="ref-for-dom-layoutconstraints-fixedblocksize④">fixedBlockSize</a></code> attributes to do so.</p>
   <p>The <a data-link-type="dfn" href="#layout-api-container" id="ref-for-layout-api-container①③">layout API container</a> can be passed size information in different ways depending on the value
of <a data-link-type="dfn" href="#document-layout-definition-layout-options" id="ref-for-document-layout-definition-layout-options⑥">layout options'</a> <code class="idl"><a data-link-type="idl" href="#dom-layoutoptions-sizing" id="ref-for-dom-layoutoptions-sizing①">sizing</a></code> (set by <code>layoutOptions</code> on the class).</p>
   <p>If the value of <a data-link-type="dfn" href="#document-layout-definition-layout-options" id="ref-for-document-layout-definition-layout-options⑦">layout options'</a> <code class="idl"><a data-link-type="idl" href="#dom-layoutoptions-sizing" id="ref-for-dom-layoutoptions-sizing②">sizing</a></code> is <code>"block-like"</code>, then the <code class="idl"><a data-link-type="idl" href="#layoutconstraints" id="ref-for-layoutconstraints⑨">LayoutConstraints</a></code> passed to the <a data-link-type="dfn" href="#layout-api-container" id="ref-for-layout-api-container①④">layout API container</a>:</p>
   <ul>
    <li data-md>
     <p><em>Must</em> calculate and set <code class="idl"><a data-link-type="idl" href="#dom-layoutconstraints-fixedinlinesize" id="ref-for-dom-layoutconstraints-fixedinlinesize⑤">fixedInlineSize</a></code> based off the rules
specified in <a data-link-type="biblio" href="#biblio-css-sizing-3">[css-sizing-3]</a> and the formatting context in which it participates, e.g.</p>
     <ul>
      <li data-md>
       <p>As a <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#block-level" id="ref-for-block-level②">block-level</a> box in a <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#block-formatting-context" id="ref-for-block-formatting-context">block formatting context</a>, it is sized like a <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#block-box" id="ref-for-block-box">block
box</a> that establishes a formatting context, with an <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto①">auto</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-size" id="ref-for-inline-size①">inline size</a> calculated as for non-replaced block boxes.</p>
      <li data-md>
       <p>As an <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#inline-level" id="ref-for-inline-level③">inline-level</a> box in an <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#inline-formatting-context" id="ref-for-inline-formatting-context">inline formatting context</a>, it is sized as an atomic
inline-level box (such as an inline-block).</p>
     </ul>
    <li data-md>
     <p><em>Must</em> calculate and set <code class="idl"><a data-link-type="idl" href="#dom-layoutconstraints-fixedblocksize" id="ref-for-dom-layoutconstraints-fixedblocksize⑤">fixedBlockSize</a></code> based off the rules
specified in <a data-link-type="biblio" href="#biblio-css-sizing-3">[css-sizing-3]</a>, and the formatting context in which it participates. If the <a data-link-type="dfn" href="#layout-api-container" id="ref-for-layout-api-container①⑤">layout API container</a> has an <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto②">auto</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-size" id="ref-for-block-size③">block size</a>, and cannot be determined
ahead of time, <code class="idl"><a data-link-type="idl" href="#dom-layoutconstraints-fixedblocksize" id="ref-for-dom-layoutconstraints-fixedblocksize⑥">fixedBlockSize</a></code> must be set to <code>null</code>.</p>
   </ul>
   <p>If the value of <a data-link-type="dfn" href="#document-layout-definition-layout-options" id="ref-for-document-layout-definition-layout-options⑧">layout options'</a> <code class="idl"><a data-link-type="idl" href="#dom-layoutoptions-sizing" id="ref-for-dom-layoutoptions-sizing③">sizing</a></code> is <code>"manual"</code>, then the user-agent must not pre-calculate <code class="idl"><a data-link-type="idl" href="#dom-layoutconstraints-fixedinlinesize" id="ref-for-dom-layoutconstraints-fixedinlinesize⑥">fixedInlineSize</a></code> and/or <code class="idl"><a data-link-type="idl" href="#dom-layoutconstraints-fixedblocksize" id="ref-for-dom-layoutconstraints-fixedblocksize⑦">fixedBlockSize</a></code> ahead of time,
except when it is being forced to a particular size by the formatting context in which it
participates, for example:</p>
   <ul>
    <li data-md>
     <p>If the <a data-link-type="dfn" href="#layout-api-container" id="ref-for-layout-api-container①⑥">layout API container</a> is within a <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#block-formatting-context" id="ref-for-block-formatting-context①">block formatting context</a>, is inflow, and has
an <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto③">auto</a> inline size, the user agent <em>must</em> set the <code class="idl"><a data-link-type="idl" href="#dom-layoutconstraints-fixedinlinesize" id="ref-for-dom-layoutconstraints-fixedinlinesize⑦">fixedInlineSize</a></code> to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#stretch-fit-inline-size" id="ref-for-stretch-fit-inline-size">stretch-fit inline size</a>.</p>
   </ul>
   <div class="note" role="note">
     Note: In the example below the <a data-link-type="dfn" href="#layout-api-container" id="ref-for-layout-api-container①⑦">layout API container</a> has its inline size set to 50. 
<pre class="lang-html highlight"><c- p>&lt;</c-><c- f>style</c-><c- p>></c->
  <c- p>#</c-><c- nn>container</c-> <c- p>{</c->
    <c- k>width</c-><c- p>:</c-> <c- mi>100</c-><c- b>px</c-><c- p>;</c->
    <c- k>height</c-><c- p>:</c-> <c- mi>100</c-><c- b>px</c-><c- p>;</c->
    <c- k>box-sizing</c-><c- p>:</c-> <c- kc>border-box</c-><c- p>;</c->
    <c- k>padding</c-><c- p>:</c-> <c- mi>5</c-><c- b>px</c-><c- p>;</c->
  <c- p>}</c->
  <c- p>#</c-><c- nn>layout-api</c-> <c- p>{</c->
    <c- k>display</c-><c- p>:</c-> <c- nf>layout</c-><c- p>(</c-><c- n>foo</c-><c- p>);</c->
    <c- k>margin</c-><c- p>:</c-> <c- mi>0</c-> <c- mi>20</c-><c- b>px</c-><c- p>;</c->
  <c- p>}</c->
<c- p>&lt;/</c-><c- f>style</c-><c- p>></c->
<c- p>&lt;</c-><c- f>div</c-> <c- e>id</c-><c- o>=</c-><c- s>"container"</c-><c- p>></c->
  <c- p>&lt;</c-><c- f>div</c-> <c- e>id</c-><c- o>=</c-><c- s>"layout-api"</c-><c- p>>&lt;/</c-><c- f>div</c-><c- p>></c->
<c- p>&lt;/</c-><c- f>div</c-><c- p>></c->
</pre>
   </div>
   <h4 class="heading settled" data-level="5.1.1" id="interaction-sizing-positiong-layout"><span class="secno">5.1.1. </span><span class="content">Positioned layout sizing</span><a class="self-link" href="#interaction-sizing-positiong-layout"></a></h4>
   <p>If a <a data-link-type="dfn" href="#layout-api-container" id="ref-for-layout-api-container①⑧">layout API container</a> is out-of-flow positioned the user agent <em>must</em> solve the
positioned size equations (<a href="https://www.w3.org/TR/css3-positioning/#abs-non-replaced-width">CSS Positioned Layout 3 §8.1 The width of absolute or fixed positioned, non-replaced elements</a>, <a href="https://www.w3.org/TR/css3-positioning/#abs-non-replaced-height">CSS Positioned Layout 3 §8.3 The height of absolute or fixed positioned, non-replaced elements</a>), and set the appropriate <code class="idl"><a data-link-type="idl" href="#dom-layoutconstraints-fixedinlinesize" id="ref-for-dom-layoutconstraints-fixedinlinesize⑧">fixedInlineSize</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-layoutconstraints-fixedblocksize" id="ref-for-dom-layoutconstraints-fixedblocksize⑧">fixedBlockSize</a></code>.</p>
   <div class="note" role="note">
     Note: In the example below the <a data-link-type="dfn" href="#layout-api-container" id="ref-for-layout-api-container①⑨">layout API container</a> has its inline and block size fixed to 
    <ol start="80">
     <li data-md>
    </ol>
<pre class="lang-html highlight"><c- p>&lt;</c-><c- f>style</c-><c- p>></c->
  <c- p>#</c-><c- nn>container</c-> <c- p>{</c->
    <c- k>position</c-><c- p>:</c-> <c- kc>relative</c-><c- p>;</c->
    <c- k>width</c-><c- p>:</c-> <c- mi>100</c-><c- b>px</c-><c- p>;</c->
    <c- k>height</c-><c- p>:</c-> <c- mi>100</c-><c- b>px</c-><c- p>;</c->
  <c- p>}</c->
  <c- p>#</c-><c- nn>layout-api</c-> <c- p>{</c->
    <c- k>display</c-><c- p>:</c-> <c- nf>layout</c-><c- p>(</c-><c- n>foo</c-><c- p>);</c->
    <c- k>top</c-><c- p>:</c-> <c- mi>10</c-><c- b>px</c-><c- p>;</c->
    <c- k>bottom</c-><c- p>:</c-> <c- mi>10</c-><c- b>px</c-><c- p>;</c->
    <c- k>left</c-><c- p>:</c-> <c- mi>10</c-><c- b>px</c-><c- p>;</c->
    <c- k>right</c-><c- p>:</c-> <c- mi>10</c-><c- b>px</c-><c- p>;</c->
    <c- k>position</c-><c- p>:</c-> <c- kc>absolute</c-><c- p>;</c->
  <c- p>}</c->
<c- p>&lt;/</c-><c- f>style</c-><c- p>></c->
<c- p>&lt;</c-><c- f>div</c-> <c- e>id</c-><c- o>=</c-><c- s>"container"</c-><c- p>></c->
  <c- p>&lt;</c-><c- f>div</c-> <c- e>id</c-><c- o>=</c-><c- s>"layout-api"</c-><c- p>>&lt;/</c-><c- f>div</c-><c- p>></c->
<c- p>&lt;/</c-><c- f>div</c-><c- p>></c->
</pre>
   </div>
   <h3 class="heading settled" data-level="5.2" id="interaction-positioning"><span class="secno">5.2. </span><span class="content">Positioning</span><a class="self-link" href="#interaction-positioning"></a></h3>
   <p>All positioning in this level of the specification is handled by the user agent.</p>
   <p>As a result:</p>
   <ul>
    <li data-md>
     <p>Out-of-flow children do not appear as <code class="idl"><a data-link-type="idl" href="#layoutchild" id="ref-for-layoutchild③⑦">LayoutChild</a></code>ren.</p>
    <li data-md>
     <p><a data-link-type="dfn" href="#layout-api-container" id="ref-for-layout-api-container②⓪">Layout API containers</a> establish <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#containing-block" id="ref-for-containing-block③">containing blocks</a> <a href="https://www.w3.org/TR/CSS2/visudet.html#containing-block-details">exactly like block
  containers do</a>. <a data-link-type="biblio" href="#biblio-css21">[CSS21]</a></p>
    <li data-md>
     <p>The <code class="idl"><a data-link-type="idl" href="#dom-layoutfragment-inlineoffset" id="ref-for-dom-layoutfragment-inlineoffset③">inlineOffset</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-layoutfragment-blockoffset" id="ref-for-dom-layoutfragment-blockoffset③">blockOffset</a></code> represent the position of
  the fragment before any positioning and transforms have occured.</p>
    <li data-md>
     <p>The <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/visudet.html#static-position" id="ref-for-static-position">static position</a> of an absolutely-positioned child of a <a data-link-type="dfn" href="#layout-api-container" id="ref-for-layout-api-container②①">layout API container</a> is set
  to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-start" id="ref-for-inline-start">inline-start</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-start" id="ref-for-block-start">block-start</a> padding edge of the <a data-link-type="dfn" href="#layout-api-container" id="ref-for-layout-api-container②②">layout API container</a>. Auto
  margins are treated as zero for the child.</p>
   </ul>
   <div class="note" role="note">
     Note: In the example below: 
    <ul>
     <li data-md>
      <p>"child-relative" would be the only child passed to the author’s layout. If it was positioned
  at (<code class="idl"><a data-link-type="idl" href="#dom-layoutfragment-inlineoffset" id="ref-for-dom-layoutfragment-inlineoffset④">inlineOffset</a></code> <code>= 20</code>, <code class="idl"><a data-link-type="idl" href="#dom-layoutfragment-blockoffset" id="ref-for-dom-layoutfragment-blockoffset④">blockOffset</a></code> <code> = 30</code>), its final position would be (<code>25</code>, <code>40</code>) as the
  relative positioning was handled by the user agent.</p>
     <li data-md>
      <p>"child-absolute" would not appear as a <code class="idl"><a data-link-type="idl" href="#layoutchild" id="ref-for-layoutchild③⑧">LayoutChild</a></code>, and instead would be laid out and
  positioned by the user agent.</p>
     <li data-md>
      <p>The examples above also apply in a similar way to sticky and fixed positioned children.</p>
    </ul>
<pre class="lang-html highlight"><c- p>&lt;</c-><c- f>style</c-><c- p>></c->
  <c- p>#</c-><c- nn>container</c-> <c- p>{</c->
    <c- k>display</c-><c- p>:</c-> <c- nf>layout</c-><c- p>(</c-><c- n>foo</c-><c- p>);</c->
    <c- k>position</c-><c- p>:</c-> <c- kc>relative</c-><c- p>;</c-> <c- c>/* container is a containing block */</c->
    <c- k>width</c-><c- p>:</c-> <c- mi>100</c-><c- b>px</c-><c- p>;</c->
    <c- k>height</c-><c- p>:</c-> <c- mi>100</c-><c- b>px</c-><c- p>;</c->
  <c- p>}</c->
  <c- p>#</c-><c- nn>child-relative</c-> <c- p>{</c->
    <c- k>position</c-><c- p>:</c-> <c- kc>relative</c-><c- p>;</c->
    <c- k>left</c-><c- p>:</c-> <c- mi>5</c-><c- b>px</c-><c- p>;</c->
    <c- k>top</c-><c- p>:</c-> <c- mi>10</c-><c- b>px</c-><c- p>;</c->
  <c- p>}</c->
<c- p>&lt;/</c-><c- f>style</c-><c- p>></c->
<c- p>&lt;</c-><c- f>div</c-> <c- e>id</c-><c- o>=</c-><c- s>"container"</c-><c- p>></c->
  <c- p>&lt;</c-><c- f>div</c-> <c- e>id</c-><c- o>=</c-><c- s>"child-relative"</c-><c- p>>&lt;/</c-><c- f>div</c-><c- p>></c->
  <c- p>&lt;</c-><c- f>div</c-> <c- e>id</c-><c- o>=</c-><c- s>"child-absolute"</c-><c- p>>&lt;/</c-><c- f>div</c-><c- p>></c->
<c- p>&lt;/</c-><c- f>div</c-><c- p>></c->
</pre>
   </div>
   <h3 class="heading settled" data-level="5.3" id="interaction-overflow"><span class="secno">5.3. </span><span class="content">Overflow</span><a class="self-link" href="#interaction-overflow"></a></h3>
   <p>The <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scrollable-overflow" id="ref-for-scrollable-overflow">scrollable overflow</a> for a <a data-link-type="dfn" href="#layout-api-container" id="ref-for-layout-api-container②③">layout API container</a> is handled by the user agent in this
level of the specification.</p>
   <p>A <a data-link-type="dfn" href="#layout-api-container" id="ref-for-layout-api-container②④">layout API container</a> should calculate its scrollable overflow exactly like block containers
do.</p>
   <p>Even if the author’s <a data-link-type="dfn" href="#layout-api-container" id="ref-for-layout-api-container②⑤">layout API container</a> positions a fragment into the <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scrollable-overflow" id="ref-for-scrollable-overflow①">scrollable overflow</a> region, relative positioning or transforms may cause the fragment to shift such that its <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scrollable-overflow" id="ref-for-scrollable-overflow②">scrollable overflow</a> region, causing no overflow to occur.</p>
   <h3 class="heading settled" data-level="5.4" id="interaction-fragmentation"><span class="secno">5.4. </span><span class="content">Fragmentation</span><a class="self-link" href="#interaction-fragmentation"></a></h3>
   <p>A <a data-link-type="dfn" href="#parent-layout" id="ref-for-parent-layout③">parent layout</a> can ask the <a data-link-type="dfn" href="#current-layout" id="ref-for-current-layout②②">current layout</a> to <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-3/#fragment" id="ref-for-fragment③">fragment</a> by setting the <code class="idl"><a data-link-type="idl" href="#dom-layoutconstraints-blockfragmentationtype" id="ref-for-dom-layoutconstraints-blockfragmentationtype③">blockFragmentationType</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-layoutconstraints-blockfragmentationoffset" id="ref-for-dom-layoutconstraints-blockfragmentationoffset①">blockFragmentationOffset</a></code>.</p>
   <p>E.g. <a data-link-type="biblio" href="#biblio-css-multicol-1">[css-multicol-1]</a> layout would set a <code class="idl"><a data-link-type="idl" href="#dom-layoutconstraints-blockfragmentationtype" id="ref-for-dom-layoutconstraints-blockfragmentationtype④">blockFragmentationType</a></code> to <code>"column"</code> and set the <code class="idl"><a data-link-type="idl" href="#dom-layoutconstraints-blockfragmentationoffset" id="ref-for-dom-layoutconstraints-blockfragmentationoffset②">blockFragmentationOffset</a></code> to where it needs the
child to fragment.</p>
   <h3 class="heading settled" data-level="5.5" id="interaction-alignment"><span class="secno">5.5. </span><span class="content">Alignment</span><a class="self-link" href="#interaction-alignment"></a></h3>
   <p>The first/last baseline sets of a <a data-link-type="dfn" href="#layout-api-container" id="ref-for-layout-api-container②⑥">layout API container</a> is generated exactly like block
containers do (see <a href="https://www.w3.org/TR/css3-align/#baseline-export">CSS Box Alignment 3 §9.1 Determining the Baselines of a Box</a>). Except that the order of the in-flow children
should be determined by the in which they are returned form the layout method (via <code class="idl"><a data-link-type="idl" href="#dom-fragmentresultoptions-childfragments" id="ref-for-dom-fragmentresultoptions-childfragments①">childFragments</a></code>) instead of the document order.</p>
   <div class="note" role="note">
     Note: In a future level of the specification there will be the ability for the author to define the
baselines themselves. This will be of the form: 
    <p>To <em>query</em> baseline information from a <code class="idl"><a data-link-type="idl" href="#layoutchild" id="ref-for-layoutchild③⑨">LayoutChild</a></code>.</p>
<pre class="lang-javascript highlight"><c- kr>const</c-> fragment <c- o>=</c-> await child<c- p>.</c->layoutNextFragment<c- p>({</c->
  fixedInlineSize<c- o>:</c-> availableInlineSize<c- p>,</c->
  baselineRequests<c- o>:</c-> <c- p>[</c-><c- t>'alphabetic'</c-><c- p>,</c-> <c- t>'middle'</c-><c- p>],</c->
<c- p>});</c->
fragment<c- p>.</c->baselines<c- p>.</c->get<c- p>(</c-><c- t>'alphabetic'</c-><c- p>)</c-> <c- o>===</c-> <c- mi>25</c-> <c- d>/* or something */</c-><c- p>;</c->
</pre>
    <p>To <em>produce</em> baseline information for a <a data-link-type="dfn" href="#parent-layout" id="ref-for-parent-layout④">parent layout</a>:</p>
<pre class="lang-javascript highlight">registerLayout<c- p>(</c-><c- t>'baseline-producing'</c-><c- p>,</c-> <c- kr>class</c-> <c- p>{</c->
  async layout<c- p>(</c->children<c- p>,</c-> edges<c- p>,</c-> constraints<c- p>,</c-> styleMap<c- p>)</c-> <c- p>{</c->
    <c- kr>const</c-> result <c- o>=</c-> <c- p>{</c->baselines<c- o>:</c-> <c- p>{}};</c->

    <c- k>for</c-> <c- p>(</c-><c- a>let</c-> baselineRequest <c- k>of</c-> constraints<c- p>.</c->baselineRequests<c- p>)</c-> <c- p>{</c->
      <c- c1>// baselineRequest === 'alphabetic', or something else.</c->
      result<c- p>.</c->baselines<c- p>[</c->baselineRequest<c- p>]</c-> <c- o>=</c-> <c- mi>25</c-><c- p>;</c->
    <c- p>}</c->

    <c- k>return</c-> result<c- p>;</c->
  <c- p>}</c->
<c- p>});</c->
</pre>
   </div>
   <h2 class="heading settled" data-level="6" id="layout"><span class="secno">6. </span><span class="content">Layout</span><a class="self-link" href="#layout"></a></h2>
   <p>This section describes how the CSS Layout API interacts with the user agent’s layout engine.</p>
   <h3 class="heading settled" data-level="6.1" id="processing-model"><span class="secno">6.1. </span><span class="content">Processing Model</span><a class="self-link" href="#processing-model"></a></h3>
   <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="layout-api-work-task">layout API work task</dfn> is a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#struct" id="ref-for-struct②">struct</a> which describes the information needed by the user
agent layout engine to perform layout work. It consists of:</p>
   <ul>
    <li data-md>
     <p><dfn class="dfn-paneled" data-dfn-for="layout api work task" data-dfn-type="dfn" data-noexport id="layout-api-work-task-layout-constraints">layout constraints</dfn> a <code class="idl"><a data-link-type="idl" href="#dictdef-layoutconstraintsoptions" id="ref-for-dictdef-layoutconstraintsoptions④">LayoutConstraintsOptions</a></code>.</p>
    <li data-md>
     <p><dfn class="dfn-paneled" data-dfn-for="layout api work task" data-dfn-type="dfn" data-noexport id="layout-api-work-task-layout-child">layout child</dfn> a <code class="idl"><a data-link-type="idl" href="#layoutchild" id="ref-for-layoutchild④⓪">LayoutChild</a></code>.</p>
    <li data-md>
     <p><dfn class="dfn-paneled" data-dfn-for="layout api work task" data-dfn-type="dfn" data-noexport id="layout-api-work-task-child-break-token">child break token</dfn> a <code class="idl"><a data-link-type="idl" href="#childbreaktoken" id="ref-for-childbreaktoken⑦">ChildBreakToken</a></code>.</p>
    <li data-md>
     <p><dfn class="dfn-paneled" data-dfn-for="layout api work task" data-dfn-type="dfn" data-noexport id="layout-api-work-task-task-type">task type</dfn> which is either <code>"layout"</code>, or <code>"intrinsic-sizes"</code></p>
    <li data-md>
     <p><dfn class="dfn-paneled" data-dfn-for="layout api work task" data-dfn-type="dfn" data-noexport id="layout-api-work-task-promise">promise</dfn> a promise object.</p>
   </ul>
   <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="layout-api-context">layout API context</dfn> is a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#struct" id="ref-for-struct③">struct</a> which describes the information needed by the <a data-link-type="dfn" href="#current-layout" id="ref-for-current-layout②③">current layout</a> to produce either a fragment or determine the intrinsic-sizes for a <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#box" id="ref-for-box①⑦">box</a>. It
consits of:</p>
   <ul>
    <li data-md>
     <p><dfn class="dfn-paneled" data-dfn-for="layout API context" data-dfn-type="dfn" data-noexport id="layout-api-context-work-queue">work queue</dfn> which is a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list" id="ref-for-list④">list</a> of <a data-link-type="dfn" href="#layout-api-work-task" id="ref-for-layout-api-work-task②">layout API work
tasks</a>. The user agent will alternate between processing these tasks, and running the
microtask queue.</p>
    <li data-md>
     <p><dfn class="dfn-paneled" data-dfn-for="layout API context" data-dfn-type="dfn" data-noexport id="layout-api-context-unique-id">unique id</dfn> a internal unique identifier. This is used for
determining that objects exposed to the web developer are only used within the correct
layout pass. E.g. <code class="idl"><a data-link-type="idl" href="#layoutfragment" id="ref-for-layoutfragment②④">LayoutFragment</a></code>s returned in the <code class="idl"><a data-link-type="idl" href="#dictdef-fragmentresultoptions" id="ref-for-dictdef-fragmentresultoptions①">FragmentResultOptions</a></code> dictionary
belong to the current layout pass.</p>
    <li data-md>
     <p><dfn class="dfn-paneled" data-dfn-for="layout API context" data-dfn-type="dfn" data-noexport id="layout-api-context-mode">mode</dfn> which is either <code>"layout"</code>, or <code>"intrinsic-sizes"</code>. This is used for determining what the user agent layout
engine is producing, and if a call to <code class="idl"><a data-link-type="idl" href="#dom-layoutchild-layoutnextfragment" id="ref-for-dom-layoutchild-layoutnextfragment⑧">layoutNextFragment()</a></code> is valid.</p>
   </ul>
   <div class="algorithm" data-algorithm="create a layout api context">
     When the user agent wants to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="create-a-layout-api-context">create a layout API context</dfn> given <var>mode</var>, it <em>must</em> run the following steps: 
    <ol>
     <li data-md>
      <p>Return a new <a data-link-type="dfn" href="#layout-api-context" id="ref-for-layout-api-context⑤">layout API context</a> with:</p>
      <ul>
       <li data-md>
        <p><a data-link-type="dfn" href="#layout-api-context-work-queue" id="ref-for-layout-api-context-work-queue②">work queue</a> being a new <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list-empty" id="ref-for-list-empty">empty</a> <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list" id="ref-for-list⑤">list</a>.</p>
       <li data-md>
        <p><a data-link-type="dfn" href="#layout-api-context-unique-id" id="ref-for-layout-api-context-unique-id⑥">unique id</a> being a unique id.</p>
       <li data-md>
        <p><a data-link-type="dfn" href="#layout-api-context-mode" id="ref-for-layout-api-context-mode①">mode</a> being <var>mode</var>.</p>
      </ul>
    </ol>
   </div>
   <h3 class="heading settled" data-level="6.2" id="performing-layout"><span class="secno">6.2. </span><span class="content">Performing Layout</span><a class="self-link" href="#performing-layout"></a></h3>
   <p>The section describes how a user agent calls the web developer defined layout to produces intrinsic
sizes, and fragments.</p>
<pre class="idl highlight def">// This is the final return value from the author defined layout() method.
<c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-fragmentresultoptions"><code><c- g>FragmentResultOptions</c-></code></dfn> {
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double②⑥"><c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-default="0" data-dfn-for="FragmentResultOptions" data-dfn-type="dict-member" data-export data-type="double " id="dom-fragmentresultoptions-inlinesize"><code><c- g>inlineSize</c-></code></dfn> = 0;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double②⑦"><c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-default="0" data-dfn-for="FragmentResultOptions" data-dfn-type="dict-member" data-export data-type="double " id="dom-fragmentresultoptions-blocksize"><code><c- g>blockSize</c-></code></dfn> = 0;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double②⑧"><c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-default="0" data-dfn-for="FragmentResultOptions" data-dfn-type="dict-member" data-export data-type="double " id="dom-fragmentresultoptions-autoblocksize"><code><c- g>autoBlockSize</c-></code></dfn> = 0;
    <c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#layoutfragment" id="ref-for-layoutfragment②⑤"><c- n>LayoutFragment</c-></a>> <dfn class="dfn-paneled idl-code" data-default="[]" data-dfn-for="FragmentResultOptions" data-dfn-type="dict-member" data-export data-type="sequence<LayoutFragment> " id="dom-fragmentresultoptions-childfragments"><code><c- g>childFragments</c-></code></dfn> = [];
    <c- b>any</c-> <dfn class="dfn-paneled idl-code" data-default="null" data-dfn-for="FragmentResultOptions" data-dfn-type="dict-member" data-export data-type="any " id="dom-fragmentresultoptions-data"><code><c- g>data</c-></code></dfn> = <c- b>null</c->;
    <a class="n" data-link-type="idl-name" href="#dictdef-breaktokenoptions" id="ref-for-dictdef-breaktokenoptions"><c- n>BreakTokenOptions</c-></a> <dfn class="dfn-paneled idl-code" data-default="null" data-dfn-for="FragmentResultOptions" data-dfn-type="dict-member" data-export data-type="BreakTokenOptions " id="dom-fragmentresultoptions-breaktoken"><code><c- g>breakToken</c-></code></dfn> = <c- b>null</c->;
};

[<a class="idl-code" data-link-type="constructor" href="#dom-fragmentresult-fragmentresult" id="ref-for-dom-fragmentresult-fragmentresult"><c- g>Constructor</c-></a>(<c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-fragmentresultoptions" id="ref-for-dictdef-fragmentresultoptions②"><c- n>FragmentResultOptions</c-></a> <dfn class="idl-code" data-dfn-for="FragmentResult/FragmentResult(options)" data-dfn-type="argument" data-export id="dom-fragmentresult-fragmentresult-options-options"><code><c- g>options</c-></code><a class="self-link" href="#dom-fragmentresult-fragmentresult-options-options"></a></dfn>)]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="fragmentresult"><code><c- g>FragmentResult</c-></code></dfn> {
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double②⑨"><c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="double" href="#dom-fragmentresult-inlinesize" id="ref-for-dom-fragmentresult-inlinesize"><c- g>inlineSize</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double③⓪"><c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="double" href="#dom-fragmentresult-blocksize" id="ref-for-dom-fragmentresult-blocksize"><c- g>blockSize</c-></a>;
};

<c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-intrinsicsizesresultoptions"><code><c- g>IntrinsicSizesResultOptions</c-></code></dfn> {
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double③①"><c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="IntrinsicSizesResultOptions" data-dfn-type="dict-member" data-export data-type="double " id="dom-intrinsicsizesresultoptions-maxcontentsize"><code><c- g>maxContentSize</c-></code></dfn>;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double③②"><c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="IntrinsicSizesResultOptions" data-dfn-type="dict-member" data-export data-type="double " id="dom-intrinsicsizesresultoptions-mincontentsize"><code><c- g>minContentSize</c-></code></dfn>;
};
</pre>
   <p>The <code class="idl"><a data-link-type="idl" href="#fragmentresult" id="ref-for-fragmentresult">FragmentResult</a></code> has internal slot(s):</p>
   <ul>
    <li data-md>
     <p><dfn class="dfn-paneled idl-code" data-dfn-for="FragmentResult" data-dfn-type="attribute" data-export id="dom-fragmentresult-box-slot"><code>[[box]]</code></dfn> a CSS <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#box" id="ref-for-box①⑧">box</a>.</p>
    <li data-md>
     <p><dfn class="dfn-paneled idl-code" data-dfn-for="FragmentResult" data-dfn-type="attribute" data-export id="dom-fragmentresult-inline-size-slot"><code>[[inline size]]</code></dfn> the inline size of the resulting
fragment.</p>
    <li data-md>
     <p><dfn class="dfn-paneled idl-code" data-dfn-for="FragmentResult" data-dfn-type="attribute" data-export id="dom-fragmentresult-block-size-slot"><code>[[block size]]</code></dfn> the block size of the resulting
fragment.</p>
    <li data-md>
     <p><dfn class="dfn-paneled idl-code" data-dfn-for="FragmentResult" data-dfn-type="attribute" data-export id="dom-fragmentresult-child-fragments-slot"><code>[[child fragments]]</code></dfn> the list of child fragments.</p>
    <li data-md>
     <p><dfn class="dfn-paneled idl-code" data-dfn-for="FragmentResult" data-dfn-type="attribute" data-export id="dom-fragmentresult-data-slot"><code>[[data]]</code></dfn> some optional serialized data.</p>
    <li data-md>
     <p><dfn class="dfn-paneled idl-code" data-dfn-for="FragmentResult" data-dfn-type="attribute" data-export id="dom-fragmentresult-internal-break-token-slot"><code>[[internal break token]]</code></dfn> an internal representation of
the break information for this fragment.</p>
    <li data-md>
     <p><dfn class="dfn-paneled idl-code" data-dfn-for="FragmentResult" data-dfn-type="attribute" data-export id="dom-fragmentresult-unique-id-slot"><code>[[unique id]]</code></dfn> the <a data-link-type="dfn" href="#layout-api-context-unique-id" id="ref-for-layout-api-context-unique-id⑦">unique id</a> of the current <a data-link-type="dfn" href="#layout-api-context" id="ref-for-layout-api-context⑥">layout api context</a>. This slot is used so that a <code class="idl"><a data-link-type="idl" href="#fragmentresult" id="ref-for-fragmentresult①">FragmentResult</a></code> used outside the
current layout pass is invalid.</p>
   </ul>
   <hr>
   <p>The web developer defined layout method can return either a <code class="idl"><a data-link-type="idl" href="#dictdef-fragmentresultoptions" id="ref-for-dictdef-fragmentresultoptions③">FragmentResultOptions</a></code> or a <code class="idl"><a data-link-type="idl" href="#fragmentresult" id="ref-for-fragmentresult②">FragmentResult</a></code>. The <code class="idl"><a data-link-type="idl" href="#fragmentresult" id="ref-for-fragmentresult③">FragmentResult</a></code> can be used for determining the final size of the
fragment or detecting if the provided <code class="idl"><a data-link-type="idl" href="#dictdef-fragmentresultoptions" id="ref-for-dictdef-fragmentresultoptions④">FragmentResultOptions</a></code> would result in triggering a
fallback to <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#flow-layout" id="ref-for-flow-layout">flow layout</a>.</p>
   <div class="example" id="example-23995455">
    <a class="self-link" href="#example-23995455"></a> This example show the web developer using the <code class="idl"><a data-link-type="idl" href="#fragmentresult" id="ref-for-fragmentresult④">FragmentResult</a></code> instead of just returning the <code class="idl"><a data-link-type="idl" href="#dictdef-fragmentresultoptions" id="ref-for-dictdef-fragmentresultoptions⑤">FragmentResultOptions</a></code> object. 
<pre class="lang-javascript highlight">registerLayout<c- p>(</c-><c- t>'feature-detection'</c-><c- p>,</c-> <c- kr>class</c-> <c- p>{</c->
    async layout<c- p>(</c->children<c- p>,</c-> edges<c- p>,</c-> constraints<c- p>,</c-> styleMap<c- p>,</c-> breakToken<c- p>)</c-> <c- p>{</c->

      <c- a>let</c-> result<c- p>;</c->
      <c- k>try</c-> <c- p>{</c->
        result <c- o>=</c-> <c- k>new</c-> FragmentResult<c- p>({</c->
          childFragments<c- o>:</c-> <c- p>[],</c->
          autoBlockSize<c- o>:</c-> <c- mi>100</c->
        <c- p>});</c->
      <c- p>}</c-> <c- k>catch</c-> <c- p>(</c->e<c- p>)</c-> <c- p>{</c->
        <c- c1>// The above call may throw, if the dictionary was just returned, it</c->
        <c- c1>//  would fallback to flow layout.</c->
      <c- p>}</c->

      <c- c1>// The web developer can test what size the fragment will be.</c->
      result<c- p>.</c->blockSize<c- p>;</c->

      <c- c1>// Instead of returning the dictionary, we can just return this object.</c->
      <c- k>return</c-> result<c- p>;</c->
    <c- p>}</c->
<c- p>}</c->
</pre>
   </div>
   <div class="algorithm" data-algorithm="inlineSize">
     The <dfn class="dfn-paneled idl-code" data-dfn-for="FragmentResult" data-dfn-type="attribute" data-export id="dom-fragmentresult-inlinesize"><code>inlineSize</code></dfn>, on getting from a <code class="idl"><a data-link-type="idl" href="#fragmentresult" id="ref-for-fragmentresult⑤">FragmentResult</a></code> <var>this</var>,
the user agent must perform the following steps: 
    <ol>
     <li data-md>
      <p>Return <var>this</var>’ <code class="idl"><a data-link-type="idl" href="#dom-fragmentresult-inline-size-slot" id="ref-for-dom-fragmentresult-inline-size-slot">[[inline size]]</a></code> internal slot.</p>
    </ol>
   </div>
   <div class="algorithm" data-algorithm="blockSize">
     The <dfn class="dfn-paneled idl-code" data-dfn-for="FragmentResult" data-dfn-type="attribute" data-export id="dom-fragmentresult-blocksize"><code>blockSize</code></dfn>, on getting from a <code class="idl"><a data-link-type="idl" href="#fragmentresult" id="ref-for-fragmentresult⑥">FragmentResult</a></code> <var>this</var>,
the user agent must perform the following steps: 
    <ol>
     <li data-md>
      <p>Return <var>this</var>’ <code class="idl"><a data-link-type="idl" href="#dom-fragmentresult-block-size-slot" id="ref-for-dom-fragmentresult-block-size-slot">[[block size]]</a></code> internal slot.</p>
    </ol>
   </div>
   <div class="algorithm" data-algorithm="FragmentResult(options)">
     When the <dfn class="dfn-paneled idl-code" data-dfn-for="FragmentResult" data-dfn-type="constructor" data-export data-lt="FragmentResult(options)|FragmentResult()" id="dom-fragmentresult-fragmentresult"><code>FragmentResult(<var>options</var>)</code></dfn> constructor is called,
the user agent must perform the following steps: 
    <ol>
     <li data-md>
      <p>Let <var>context</var> be the <a data-link-type="dfn" href="#current-layout" id="ref-for-current-layout②④">current layout’s</a> <a data-link-type="dfn" href="#layout-api-context" id="ref-for-layout-api-context⑦">layout API context</a>.</p>
     <li data-md>
      <p>Return the result of <a data-link-type="dfn" href="#construct-a-fragment-result" id="ref-for-construct-a-fragment-result">construct a fragment result</a> given <var>context</var>, and <var>options</var>.</p>
    </ol>
   </div>
   <p class="note" role="note"><span>Note:</span> The <a data-link-type="dfn" href="#construct-a-fragment-result" id="ref-for-construct-a-fragment-result①">construct a fragment result</a> algorithm performs a series of validation checks (the
    web developer isn’t using an object from a previous invocation, and determines the final size of
    the resulting fragment.</p>
   <div class="algorithm" data-algorithm="construct a fragment result">
     When the user agent wants to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="construct-a-fragment-result">construct a fragment result</dfn> given <var>context</var>, and <var>options</var> the user agent must perform the following steps: 
    <ol>
     <li data-md>
      <p>Let <var>uniqueId</var> be <var>context</var>’s <a data-link-type="dfn" href="#layout-api-context-unique-id" id="ref-for-layout-api-context-unique-id⑧">unique id</a>.</p>
     <li data-md>
      <p>Let <var>box</var> be the <a data-link-type="dfn" href="#current-layout" id="ref-for-current-layout②⑤">current layout’s</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#box" id="ref-for-box①⑨">box</a>.</p>
     <li data-md>
      <p>Let <var>breakTokenOptions</var> be <var>options</var>’s <code class="idl"><a data-link-type="idl" href="#dom-fragmentresultoptions-breaktoken" id="ref-for-dom-fragmentresultoptions-breaktoken">breakToken</a></code>.</p>
     <li data-md>
      <p><a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list-iterate" id="ref-for-list-iterate">For each</a> <var>childFragment</var> in <var>options</var>’s <code class="idl"><a data-link-type="idl" href="#dom-fragmentresultoptions-childfragments" id="ref-for-dom-fragmentresultoptions-childfragments②">childFragments</a></code>,
perform the following stubsteps:</p>
      <ol>
       <li data-md>
        <p>If <var>childFragment</var>’s <code class="idl"><a data-link-type="idl" href="#dom-layoutfragment-unique-id-slot" id="ref-for-dom-layoutfragment-unique-id-slot">[[unique id]]</a></code> internal slot is not equal to <var>uniqueId</var>, then <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw⑥">throw</a> a <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-native-error-types-used-in-this-standard-typeerror" id="ref-for-sec-native-error-types-used-in-this-standard-typeerror②">TypeError</a>, and abort all these steps.</p>
      </ol>
     <li data-md>
      <p><a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list-iterate" id="ref-for-list-iterate①">For each</a> <var>childBreakToken</var> in <var>breakTokenOptions</var>’s <code class="idl"><a data-link-type="idl" href="#dom-breaktokenoptions-childbreaktokens" id="ref-for-dom-breaktokenoptions-childbreaktokens">childBreakTokens</a></code>, perform the following stubsteps:</p>
      <ol>
       <li data-md>
        <p>If <var>childBreakToken</var>’s <code class="idl"><a data-link-type="idl" href="#dom-childbreaktoken-unique-id-slot" id="ref-for-dom-childbreaktoken-unique-id-slot">[[unique id]]</a></code> internal slot is not equal to <var>uniqueId</var>, then <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw⑦">throw</a> a <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-native-error-types-used-in-this-standard-typeerror" id="ref-for-sec-native-error-types-used-in-this-standard-typeerror③">TypeError</a>, and abort all these steps.</p>
      </ol>
     <li data-md>
      <p>If <var>sizingMode</var> is <code>"block-like"</code>:</p>
      <ul>
       <li data-md>
        <p>Then:</p>
        <ol>
         <li data-md>
          <p>Let <var>inlineSize</var> be the result of calculating <var>box</var>’s <b>border-box</b> <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-size" id="ref-for-inline-size②">inline
size</a> (relative to <var>box</var>’s writing mode) exactly like block containers do.</p>
         <li data-md>
          <p>Let <var>blockSize</var> be the result of calculating <var>box</var>’s <b>border-box</b> <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-size" id="ref-for-block-size④">block size</a> (relative to <var>box</var>’s writing mode) exactly like block containers do,
given <var>fragment</var>’s <code class="idl"><a data-link-type="idl" href="#dom-fragmentresultoptions-autoblocksize" id="ref-for-dom-fragmentresultoptions-autoblocksize">autoBlockSize</a></code> as the "intrinsic
block size".</p>
        </ol>
       <li data-md>
        <p>Otherwise (<var>sizingMode</var> is <code>"manual"</code>):</p>
        <ol>
         <li data-md>
          <p>Let <var>inlineSize</var> be <var>fragment</var>’s <code class="idl"><a data-link-type="idl" href="#dom-fragmentresultoptions-inlinesize" id="ref-for-dom-fragmentresultoptions-inlinesize">inlineSize</a></code>.</p>
         <li data-md>
          <p>Let <var>blockSize</var> be <var>fragment</var>’s <code class="idl"><a data-link-type="idl" href="#dom-fragmentresultoptions-blocksize" id="ref-for-dom-fragmentresultoptions-blocksize">blockSize</a></code>.</p>
        </ol>
      </ul>
     <li data-md>
      <p>Let <var>clonedData</var> be the result of invoking <a data-link-type="dfn" href="https://html.spec.whatwg.org/#structuredserializeforstorage" id="ref-for-structuredserializeforstorage①">StructuredSerializeForStorage</a> on <var>options</var>’s <code class="idl"><a data-link-type="idl" href="#dom-fragmentresultoptions-data" id="ref-for-dom-fragmentresultoptions-data①">data</a></code>.</p>
     <li data-md>
      <p>Let <var>clonedBreakTokenData</var> be the result of invoking <a data-link-type="dfn" href="https://html.spec.whatwg.org/#structuredserializeforstorage" id="ref-for-structuredserializeforstorage②">StructuredSerializeForStorage</a> on <var>breakTokenOptions</var>’s <code class="idl"><a data-link-type="idl" href="#dom-breaktokenoptions-data" id="ref-for-dom-breaktokenoptions-data">data</a></code>.</p>
     <li data-md>
      <p>Let <var>internalBreakToken</var> be the internal representation of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-4/#fragmentation-break" id="ref-for-fragmentation-break">fragmentation break</a> containing <var>clonedBreakTokenData</var>, and <var>breakTokenOptions</var>.</p>
     <li data-md>
      <p>Return a new <code class="idl"><a data-link-type="idl" href="#fragmentresult" id="ref-for-fragmentresult⑦">FragmentResult</a></code> with:</p>
      <ul>
       <li data-md>
        <p><code class="idl"><a data-link-type="idl" href="#dom-fragmentresult-box-slot" id="ref-for-dom-fragmentresult-box-slot">[[box]]</a></code> being <var>box</var>.</p>
       <li data-md>
        <p><code class="idl"><a data-link-type="idl" href="#dom-fragmentresult-inline-size-slot" id="ref-for-dom-fragmentresult-inline-size-slot①">[[inline size]]</a></code> being <var>inlineSize</var>.</p>
       <li data-md>
        <p><code class="idl"><a data-link-type="idl" href="#dom-fragmentresult-block-size-slot" id="ref-for-dom-fragmentresult-block-size-slot①">[[block size]]</a></code> being <var>blockSize</var>.</p>
       <li data-md>
        <p><code class="idl"><a data-link-type="idl" href="#dom-fragmentresult-child-fragments-slot" id="ref-for-dom-fragmentresult-child-fragments-slot">[[child fragments]]</a></code> being <var>options</var>’s <code class="idl"><a data-link-type="idl" href="#dom-fragmentresultoptions-childfragments" id="ref-for-dom-fragmentresultoptions-childfragments③">childFragments</a></code>.</p>
       <li data-md>
        <p><code class="idl"><a data-link-type="idl" href="#dom-fragmentresult-data-slot" id="ref-for-dom-fragmentresult-data-slot">[[data]]</a></code> being <var>clonedData</var>.</p>
       <li data-md>
        <p><code class="idl"><a data-link-type="idl" href="#dom-fragmentresult-internal-break-token-slot" id="ref-for-dom-fragmentresult-internal-break-token-slot">[[internal break token]]</a></code> being <var>internalBreakToken</var>.</p>
       <li data-md>
        <p><code class="idl"><a data-link-type="idl" href="#dom-fragmentresult-unique-id-slot" id="ref-for-dom-fragmentresult-unique-id-slot">[[unique id]]</a></code> being <var>uniqueId</var>.</p>
      </ul>
    </ol>
   </div>
   <h4 class="heading settled" data-level="6.2.1" id="determining-intrinsic-sizes"><span class="secno">6.2.1. </span><span class="content">Determining Intrinsic Sizes</span><a class="self-link" href="#determining-intrinsic-sizes"></a></h4>
   <p>The <a data-link-type="dfn" href="#determine-the-intrinsic-sizes" id="ref-for-determine-the-intrinsic-sizes①">determine the intrinsic sizes</a> algorithm defines how a user agent is to query the author
defined layout for a <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#box" id="ref-for-box②⓪">box’s</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#dfn-intrinsic-sizes" id="ref-for-dfn-intrinsic-sizes">intrinsic sizes</a> information.</p>
   <p class="note" role="note"><span>Note:</span> The <a data-link-type="dfn" href="#determine-the-intrinsic-sizes" id="ref-for-determine-the-intrinsic-sizes②">determine the intrinsic sizes</a> algorithm allows for user agents to cache an arbitrary
    number of previous invocations to reuse.</p>
   <div class="algorithm" data-algorithm="determine the intrinsic sizes">
     When the user agent wants to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="determine-the-intrinsic-sizes">determine the intrinsic sizes</dfn> of a <a data-link-type="dfn" href="#layout-api-formatting-context" id="ref-for-layout-api-formatting-context">layout API formatting
context</a> for a given <var>box</var>, <var>childBoxes</var> it <em>must</em> run the following steps: 
    <ol>
     <li data-md>
      <p>Let <var>layoutFunction</var> be the <a class="css" data-link-type="maybe" href="#valdef-display-layout" id="ref-for-valdef-display-layout⑤">layout()</a> for the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#computed-value" id="ref-for-computed-value⑦">computed value</a> of <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-display-3/#typedef-display-inside" id="ref-for-typedef-display-inside②" title="Expands to: flex | flow | grid | flow-root | table | ruby">&lt;display-inside></a> for <var>box</var>.</p>
     <li data-md>
      <p>Let <var>name</var> be the first argument of the <var>layoutFunction</var>.</p>
     <li data-md>
      <p>Let <var>documentDefinition</var> be the result of <a data-link-type="dfn" href="#get-a-document-layout-definition" id="ref-for-get-a-document-layout-definition">get a document layout definition</a> given <var>name</var>.</p>
      <p>If <a data-link-type="dfn" href="#get-a-document-layout-definition" id="ref-for-get-a-document-layout-definition①">get a document layout definition</a> returned failure, or if <var>documentDefinition</var> is <code>"invalid"</code>, then let <var>box</var> fallback to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#flow-layout" id="ref-for-flow-layout①">flow layout</a> and abort all these
steps.</p>
     <li data-md>
      <p>Let <var>workletGlobalScope</var> be a <code class="idl"><a data-link-type="idl" href="#layoutworkletglobalscope" id="ref-for-layoutworkletglobalscope⑧">LayoutWorkletGlobalScope</a></code> from the list of <a data-link-type="dfn" href="https://drafts.css-houdini.org/worklets/#worklets-workletglobalscopes" id="ref-for-worklets-workletglobalscopes">worklet’s
WorkletGlobalScopes</a> from the layout <code class="idl"><a data-link-type="idl" href="https://drafts.css-houdini.org/worklets/#worklet" id="ref-for-worklet③">Worklet</a></code>, following the rules defined in <a href="#global-scope-selection">§ 6.2.3 Global Scope Selection</a>.</p>
      <p>The user agent <em>may</em> also <a data-link-type="dfn" href="https://drafts.css-houdini.org/worklets/#create-a-workletglobalscope" id="ref-for-create-a-workletglobalscope">create a WorkletGlobalScope</a> at this time, given the
layout <code class="idl"><a data-link-type="idl" href="https://drafts.css-houdini.org/worklets/#worklet" id="ref-for-worklet④">Worklet</a></code>.</p>
     <li data-md>
      <p>Run <a data-link-type="dfn" href="#invoke-an-intrinsic-sizes-callback" id="ref-for-invoke-an-intrinsic-sizes-callback">invoke an intrinsic sizes callback</a> given <var>name</var>, <var>box</var>, <var>childBoxes</var>, and <var>workletGlobalScope</var> optionally <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/infrastructure.html#in-parallel" id="ref-for-in-parallel">in parallel</a>.</p>
      <p class="note" role="note"><span>Note:</span> If the user agent runs <a data-link-type="dfn" href="#invoke-an-intrinsic-sizes-callback" id="ref-for-invoke-an-intrinsic-sizes-callback①">invoke an intrinsic sizes callback</a> on a thread <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/infrastructure.html#in-parallel" id="ref-for-in-parallel①">in
    parallel</a>, it should select a layout worklet global scope which can be used on that
    thread.</p>
    </ol>
   </div>
   <div class="algorithm" data-algorithm="invoke an intrinsic sizes callback">
     When the user agent wants to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="invoke-an-intrinsic-sizes-callback">invoke an intrinsic sizes callback</dfn> given <var>name</var>, <var>box</var>, <var>childBoxes</var>, and <var>workletGlobalScope</var>, it <em>must</em> run the following steps: 
    <ol>
     <li data-md>
      <p>Let <var>definition</var> be the result of <a data-link-type="dfn" href="#get-a-layout-definition" id="ref-for-get-a-layout-definition③">get a layout definition</a> given <var>name</var>, and <var>workletGlobalScope</var>.</p>
      <p>If <a data-link-type="dfn" href="#get-a-layout-definition" id="ref-for-get-a-layout-definition④">get a layout definition</a> returned failure, let the <var>box</var> fallback to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#flow-layout" id="ref-for-flow-layout②">flow
layout</a> and abort all these steps.</p>
     <li data-md>
      <p>Let <var>layoutInstance</var> be the result of <a data-link-type="dfn" href="#get-a-layout-class-instance" id="ref-for-get-a-layout-class-instance">get a layout class instance</a> given <var>box</var>, <var>definition</var>, <var>workletGlobalScope</var>.</p>
      <p>If <a data-link-type="dfn" href="#get-a-layout-class-instance" id="ref-for-get-a-layout-class-instance①">get a layout class instance</a> returned failure, let the <var>box</var> fallback to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#flow-layout" id="ref-for-flow-layout③">flow
layout</a> and abort all these steps.</p>
     <li data-md>
      <p>Let <var>inputProperties</var> be <var>definition</var>’s <a data-link-type="dfn" href="#layout-definition-input-properties" id="ref-for-layout-definition-input-properties①">input properties</a>.</p>
     <li data-md>
      <p>Let <var>children</var> be a new <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list" id="ref-for-list⑥">list</a>.</p>
     <li data-md>
      <p><a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list-iterate" id="ref-for-list-iterate②">For each</a> <var>childBox</var> in <var>childBoxes</var> perform the following substeps:</p>
      <ol>
       <li data-md>
        <p>Let <var>layoutChild</var> be the result of <a data-link-type="dfn" href="#get-a-layout-child" id="ref-for-get-a-layout-child①">get a layout child</a> given <var>workletGlobalScope</var>, <var>name</var>, <var>childBox</var>, and <var>context</var>’s <a data-link-type="dfn" href="#layout-api-context-unique-id" id="ref-for-layout-api-context-unique-id⑨">unique id</a>.</p>
       <li data-md>
        <p><a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list-append" id="ref-for-list-append②">Append</a> <var>layoutChild</var> to <var>children</var>.</p>
      </ol>
     <li data-md>
      <p>Let <var>edges</var> be a new <code class="idl"><a data-link-type="idl" href="#layoutedges" id="ref-for-layoutedges④">LayoutEdges</a></code> populated with the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#computed-value" id="ref-for-computed-value⑧">computed value</a> for all the <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/box.html#box-dimensions" id="ref-for-box-dimensions①">box
model edges</a> for <var>box</var>.</p>
     <li data-md>
      <p>Let <var>styleMap</var> be the result of <a data-link-type="dfn" href="#get-a-style-map" id="ref-for-get-a-style-map">get a style map</a> given <var>box</var>, and <var>inputProperties</var>.</p>
     <li data-md>
      <p>At this stage the user agent may re-use the <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#dfn-intrinsic-sizes" id="ref-for-dfn-intrinsic-sizes①">intrinsic sizes</a> from a previous invocation if <var>children</var>, <var>edges</var>, and <var>styleMap</var> are equivalent to that previous invocation. If so let
the intrinsic sizes the cached intrinsic sizes and abort all these steps.</p>
     <li data-md>
      <p>Let <var>context</var> be the result of <a data-link-type="dfn" href="#create-a-layout-api-context" id="ref-for-create-a-layout-api-context">create a layout API context</a> given <code>"intrinsic-sizes"</code>.</p>
     <li data-md>
      <p>Let <var>intrinsicSizesFunction</var> be <var>definition</var>’s <a data-link-type="dfn" href="#layout-definition-intrinsic-sizes-function" id="ref-for-layout-definition-intrinsic-sizes-function①">intrinsic sizes function</a>.</p>
     <li data-md>
      <p>Let <var>value</var> be the result of <a data-link-type="dfn" href="https://heycam.github.io/webidl/#invoke-a-callback-function" id="ref-for-invoke-a-callback-function">Invoke</a>(<var>intrinsicSizesFunction</var>, <var>layoutInstance</var>,
    «<var>children</var>, <var>edges</var>, <var>styleMap</var>»).</p>
      <p>If an exception is <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw⑧">thrown</a> the let <var>box</var> fallback to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#flow-layout" id="ref-for-flow-layout④">flow layout</a> and abort all
these steps.</p>
     <li data-md>
      <p>If <var>value</var> is a promise:</p>
      <ul>
       <li data-md>
        <p>Then:</p>
        <ol>
         <li data-md>
          <p>Let <var>intrinsicSizesValue</var> be the result of <a data-link-type="dfn" href="#run-a-work-queue" id="ref-for-run-a-work-queue">run a work queue</a> given <var>value</var>, and <var>context</var>’s <a data-link-type="dfn" href="#layout-api-context-work-queue" id="ref-for-layout-api-context-work-queue③">work queue</a>.</p>
          <p>If <a data-link-type="dfn" href="#run-a-work-queue" id="ref-for-run-a-work-queue①">run a work queue</a> returns failure, let the <var>box</var> fallback to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#flow-layout" id="ref-for-flow-layout⑤">flow
layout</a> and abort all these steps.</p>
        </ol>
       <li data-md>
        <p>Otherwise:</p>
        <ol>
         <li data-md>
          <p>Let <var>intrinsicSizesValue</var> be <var>value</var>.</p>
        </ol>
      </ul>
     <li data-md>
      <p>Let <var>intrinsicSizes</var> be the result of <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#javascript-string-convert" id="ref-for-javascript-string-convert⑤">converting</a> <var>intrinsicSizesValue</var> to a <code class="idl"><a data-link-type="idl" href="#dictdef-intrinsicsizesresultoptions" id="ref-for-dictdef-intrinsicsizesresultoptions">IntrinsicSizesResultOptions</a></code>. If an exception is <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw⑨">thrown</a>, let <var>box</var> fallback to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#flow-layout" id="ref-for-flow-layout⑥">flow layout</a> and abort all these steps.</p>
     <li data-md>
      <p>Set the <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#dfn-intrinsic-sizes" id="ref-for-dfn-intrinsic-sizes②">intrinsic sizes</a> of <var>box</var>:</p>
      <ul>
       <li data-md>
        <p>Let <var>intrinsicSizes</var>’s <code class="idl"><a data-link-type="idl" href="#dom-intrinsicsizesresultoptions-mincontentsize" id="ref-for-dom-intrinsicsizesresultoptions-mincontentsize">minContentSize</a></code> be the <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#min-content" id="ref-for-min-content①">min-content
size</a> of <var>box</var>.</p>
       <li data-md>
        <p>Let <var>intrinsicSizes</var>’s <code class="idl"><a data-link-type="idl" href="#dom-intrinsicsizesresultoptions-maxcontentsize" id="ref-for-dom-intrinsicsizesresultoptions-maxcontentsize">maxContentSize</a></code> be the <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-content" id="ref-for-max-content①">max-content
size</a> of <var>box</var>.</p>
      </ul>
    </ol>
   </div>
   <h4 class="heading settled" data-level="6.2.2" id="generating-fragments"><span class="secno">6.2.2. </span><span class="content">Generating Fragments</span><a class="self-link" href="#generating-fragments"></a></h4>
   <p>The <a data-link-type="dfn" href="#generate-a-fragment" id="ref-for-generate-a-fragment①">generate a fragment</a> algorithm defines how a user agent is to generate a <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#box" id="ref-for-box②①">box’s</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-3/#fragment" id="ref-for-fragment④">fragment</a> for an author defined layout.</p>
   <p class="note" role="note"><span>Note:</span> The <a data-link-type="dfn" href="#generate-a-fragment" id="ref-for-generate-a-fragment②">generate a fragment</a> algorithm allows for user agents to cache an arbitrary number of
    previous invocations to reuse.</p>
   <div class="algorithm" data-algorithm="generate a fragment">
     When the user agent wants to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="generate-a-fragment">generate a fragment</dfn> of a <a data-link-type="dfn" href="#layout-api-formatting-context" id="ref-for-layout-api-formatting-context①">layout API formatting context</a> for a given <var>box</var>, <var>childBoxes</var>, <var>internalLayoutConstraints</var>, and an optional <var>internalBreakToken</var> it <em>must</em> run the following steps: 
    <ol>
     <li data-md>
      <p>Let <var>layoutFunction</var> be the <a class="css" data-link-type="maybe" href="#valdef-display-layout" id="ref-for-valdef-display-layout⑥">layout()</a> for the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#computed-value" id="ref-for-computed-value⑨">computed value</a> of <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-display-3/#typedef-display-inside" id="ref-for-typedef-display-inside③" title="Expands to: flex | flow | grid | flow-root | table | ruby">&lt;display-inside></a> for <var>box</var>.</p>
     <li data-md>
      <p>Let <var>name</var> be the first argument of the <var>layoutFunction</var>.</p>
     <li data-md>
      <p>Let <var>documentDefinition</var> be the result of <a data-link-type="dfn" href="#get-a-document-layout-definition" id="ref-for-get-a-document-layout-definition②">get a document layout definition</a> given <var>name</var>.</p>
      <p>If <a data-link-type="dfn" href="#get-a-document-layout-definition" id="ref-for-get-a-document-layout-definition③">get a document layout definition</a> returned failure, or if <var>documentDefinition</var> is <code>"invalid"</code>, then let <var>box</var> fallback to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#flow-layout" id="ref-for-flow-layout⑦">flow layout</a> and abort all these
steps.</p>
     <li data-md>
      <p>Let <var>workletGlobalScope</var> be a <code class="idl"><a data-link-type="idl" href="#layoutworkletglobalscope" id="ref-for-layoutworkletglobalscope⑨">LayoutWorkletGlobalScope</a></code> from the list of <a data-link-type="dfn" href="https://drafts.css-houdini.org/worklets/#worklets-workletglobalscopes" id="ref-for-worklets-workletglobalscopes①">worklet’s
WorkletGlobalScopes</a> from the layout <code class="idl"><a data-link-type="idl" href="https://drafts.css-houdini.org/worklets/#worklet" id="ref-for-worklet⑤">Worklet</a></code>, following the rules defined in <a href="#global-scope-selection">§ 6.2.3 Global Scope Selection</a>.</p>
      <p>The user agent <em>may</em> also <a data-link-type="dfn" href="https://drafts.css-houdini.org/worklets/#create-a-workletglobalscope" id="ref-for-create-a-workletglobalscope①">create a WorkletGlobalScope</a> at this time, given the
layout <code class="idl"><a data-link-type="idl" href="https://drafts.css-houdini.org/worklets/#worklet" id="ref-for-worklet⑥">Worklet</a></code>.</p>
     <li data-md>
      <p>Run <a data-link-type="dfn" href="#invoke-a-layout-callback" id="ref-for-invoke-a-layout-callback">invoke a layout callback</a> given <var>name</var>, <var>box</var>, <var>childBoxes</var>, <var>internalLayoutConstraints</var>, <var>internalBreakToken</var>, and <var>workletGlobalScope</var> optionally <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/infrastructure.html#in-parallel" id="ref-for-in-parallel②">in
parallel</a>.</p>
      <p class="note" role="note"><span>Note:</span> If the user agent runs <a data-link-type="dfn" href="#invoke-a-layout-callback" id="ref-for-invoke-a-layout-callback①">invoke a layout callback</a> on a thread <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/infrastructure.html#in-parallel" id="ref-for-in-parallel③">in parallel</a>, it
    should select a layout worklet global scope which can be used on that thread.</p>
    </ol>
   </div>
   <div class="algorithm" data-algorithm="invoke a layout callback">
     When the user agent wants to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="invoke-a-layout-callback">invoke a layout callback</dfn> given <var>name</var>, <var>box</var>, <var>childBoxes</var>, <var>internalLayoutConstraints</var>, <var>internalBreakToken</var>, and <var>workletGlobalScope</var>, it <em>must</em> run the
following steps: 
    <ol>
     <li data-md>
      <p>Let <var>definition</var> be the result of <a data-link-type="dfn" href="#get-a-layout-definition" id="ref-for-get-a-layout-definition⑤">get a layout definition</a> given <var>name</var>, and <var>workletGlobalScope</var>.</p>
      <p>If <a data-link-type="dfn" href="#get-a-layout-definition" id="ref-for-get-a-layout-definition⑥">get a layout definition</a> returned failure, let the <var>box</var> fallback to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#flow-layout" id="ref-for-flow-layout⑧">flow
layout</a> and abort all these steps.</p>
     <li data-md>
      <p>Let <var>layoutInstance</var> be the result of <a data-link-type="dfn" href="#get-a-layout-class-instance" id="ref-for-get-a-layout-class-instance②">get a layout class instance</a> given <var>box</var>, <var>definition</var>, <var>workletGlobalScope</var>.</p>
      <p>If <a data-link-type="dfn" href="#get-a-layout-class-instance" id="ref-for-get-a-layout-class-instance③">get a layout class instance</a> returned failure, let the <var>box</var> fallback to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#flow-layout" id="ref-for-flow-layout⑨">flow
layout</a> and abort all these steps.</p>
     <li data-md>
      <p>Let <var>context</var> be the result of <a data-link-type="dfn" href="#create-a-layout-api-context" id="ref-for-create-a-layout-api-context①">create a layout API context</a> given <code>"layout"</code>.</p>
     <li data-md>
      <p>Let <var>sizingMode</var> be <var>definition</var>’s <a data-link-type="dfn" href="#layout-definition-layout-options" id="ref-for-layout-definition-layout-options①">layout options</a>' <code class="idl"><a data-link-type="idl" href="#dom-layoutoptions-sizing" id="ref-for-dom-layoutoptions-sizing④">sizing</a></code> property.</p>
     <li data-md>
      <p>Let <var>inputProperties</var> be <var>definition</var>’s <a data-link-type="dfn" href="#layout-definition-input-properties" id="ref-for-layout-definition-input-properties②">input properties</a>.</p>
     <li data-md>
      <p>Let <var>children</var> be a new <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list" id="ref-for-list⑦">list</a>.</p>
     <li data-md>
      <p><a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list-iterate" id="ref-for-list-iterate③">For each</a> <var>childBox</var> in <var>childBoxes</var> perform the following substeps:</p>
      <ol>
       <li data-md>
        <p>Let <var>layoutChild</var> be the result of <a data-link-type="dfn" href="#get-a-layout-child" id="ref-for-get-a-layout-child②">get a layout child</a> given <var>workletGlobalScope</var>, <var>name</var>, <var>childBox</var>, and <var>context</var>’s <a data-link-type="dfn" href="#layout-api-context-unique-id" id="ref-for-layout-api-context-unique-id①⓪">unique id</a>.</p>
       <li data-md>
        <p><a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list-append" id="ref-for-list-append③">Append</a> <var>layoutChild</var> to <var>children</var>.</p>
      </ol>
     <li data-md>
      <p>Let <var>edges</var> be a new <code class="idl"><a data-link-type="idl" href="#layoutedges" id="ref-for-layoutedges⑤">LayoutEdges</a></code> populated with the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#computed-value" id="ref-for-computed-value①⓪">computed value</a> for all the <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/box.html#box-dimensions" id="ref-for-box-dimensions②">box
model edges</a> for <var>box</var>.</p>
     <li data-md>
      <p>Let <var>layoutConstraints</var> be the result of <a data-link-type="dfn" href="#create-a-layout-constraints-object" id="ref-for-create-a-layout-constraints-object①">create a layout constraints object</a> given <var>internalLayoutConstraints</var>, <var>box</var>, and <var>sizingMode</var>.</p>
     <li data-md>
      <p>Let <var>styleMap</var> be the result of <a data-link-type="dfn" href="#get-a-style-map" id="ref-for-get-a-style-map①">get a style map</a> given <var>box</var>, and <var>inputProperties</var>.</p>
     <li data-md>
      <p>Let <var>breakToken</var> be a new <code class="idl"><a data-link-type="idl" href="#breaktoken" id="ref-for-breaktoken">BreakToken</a></code> populated with the appropriate information from <var>internalBreakToken</var>.</p>
      <p>If <var>internalBreakToken</var> is null, let <var>breakToken</var> be null.</p>
     <li data-md>
      <p>At this stage the user agent may re-use a <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-3/#fragment" id="ref-for-fragment⑤">fragment</a> from a previous invocation if <var>children</var>, <var>styleMap</var>, <var>layoutConstraints</var>, <var>breakToken</var> are equivalent to that previous
invocation. If so let the fragment output be that cached fragment and abort all these steps.</p>
     <li data-md>
      <p>Let <var>layoutFunction</var> be <var>definition</var>’s <a data-link-type="dfn" href="#layout-definition-layout-function" id="ref-for-layout-definition-layout-function①">layout function</a>.</p>
     <li data-md>
      <p>Let <var>value</var> be the result of <a data-link-type="dfn" href="https://heycam.github.io/webidl/#invoke-a-callback-function" id="ref-for-invoke-a-callback-function①">Invoke</a>(<var>layoutFunction</var>, <var>layoutInstance</var>, «<var>children</var>, <var>edges</var>, <var>layoutConstraints</var>, <var>styleMap</var>, <var>breakToken</var>»).</p>
      <p>If an exception is <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw①⓪">thrown</a> the let <var>box</var> fallback to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#flow-layout" id="ref-for-flow-layout①⓪">flow layout</a> and abort all
these steps.</p>
     <li data-md>
      <p>If <var>value</var> is a promise:</p>
      <ul>
       <li data-md>
        <p>Then:</p>
        <ol>
         <li data-md>
          <p>Let <var>fragmentResultValue</var> be the result of <a data-link-type="dfn" href="#run-a-work-queue" id="ref-for-run-a-work-queue②">run a work queue</a> given <var>value</var>.</p>
          <p>If <a data-link-type="dfn" href="#run-a-work-queue" id="ref-for-run-a-work-queue③">run a work queue</a> returns failure, let the <var>box</var> fallback to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#flow-layout" id="ref-for-flow-layout①①">flow
layout</a> and abort all these steps.</p>
        </ol>
       <li data-md>
        <p>Otherwise:</p>
        <ol>
         <li data-md>
          <p>Let <var>fragmentResultValue</var> be <var>value</var>.</p>
        </ol>
      </ul>
     <li data-md>
      <p>If <var>fragmentResultValue</var> is a <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-platform-object" id="ref-for-dfn-platform-object">platform object</a>:</p>
      <ul>
       <li data-md>
        <p>Then:</p>
        <ol>
         <li data-md>
          <p>Let <var>fragmentResult</var> be the result <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#javascript-string-convert" id="ref-for-javascript-string-convert⑥">converting</a> <var>fragmentResultValue</var> to a <code class="idl"><a data-link-type="idl" href="#fragmentresult" id="ref-for-fragmentresult⑧">FragmentResult</a></code>.</p>
          <p>If an exception is <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw①①">thrown</a>, let <var>box</var> fallback to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#flow-layout" id="ref-for-flow-layout①②">flow layout</a> and abort all
these steps.</p>
        </ol>
       <li data-md>
        <p>Otherwise:</p>
        <ol>
         <li data-md>
          <p>Let <var>fragmentResultOptions</var> be the result of <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#javascript-string-convert" id="ref-for-javascript-string-convert⑦">converting</a> <var>fragmentResultValue</var> to
a <code class="idl"><a data-link-type="idl" href="#dictdef-fragmentresultoptions" id="ref-for-dictdef-fragmentresultoptions⑥">FragmentResultOptions</a></code>.</p>
          <p>If an exception is <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw①②">thrown</a>, let <var>box</var> fallback to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#flow-layout" id="ref-for-flow-layout①③">flow layout</a> and abort
all these steps.</p>
         <li data-md>
          <p>Let <var>fragmentResult</var> be the result of <a data-link-type="dfn" href="#construct-a-fragment-result" id="ref-for-construct-a-fragment-result②">construct a fragment result</a> given <var>fragmentResultOptions</var>.</p>
          <p>If an exception is <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw①③">thrown</a>, let <var>box</var> fallback to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#flow-layout" id="ref-for-flow-layout①④">flow layout</a> and abort
all these steps.</p>
        </ol>
      </ul>
     <li data-md>
      <p>Return an internal representation of a <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-3/#fragment" id="ref-for-fragment⑥">fragment</a> with:</p>
      <ul>
       <li data-md>
        <p>The <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-size" id="ref-for-inline-size③">inline size</a> set to <var>fragmentResult</var>’s <code class="idl"><a data-link-type="idl" href="#dom-fragmentresult-inline-size-slot" id="ref-for-dom-fragmentresult-inline-size-slot②">[[inline size]]</a></code>.</p>
       <li data-md>
        <p>The <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-size" id="ref-for-block-size⑤">block size</a> set to <var>fragmentResult</var>’s <code class="idl"><a data-link-type="idl" href="#dom-fragmentresult-inline-size-slot" id="ref-for-dom-fragmentresult-inline-size-slot③">[[inline size]]</a></code>.</p>
       <li data-md>
        <p>The child fragments set to <var>fragmentResult</var>’s <code class="idl"><a data-link-type="idl" href="#dom-fragmentresult-child-fragments-slot" id="ref-for-dom-fragmentresult-child-fragments-slot①">[[child fragments]]</a></code>.</p>
        <p>The ordering <em>is</em> important as this dictates their paint order (described in <a href="#layout-api-containers">§ 2 Layout API Containers</a>). Their position relative to the <b>border box</b> of the
fragment should be based off the author specified <code class="idl"><a data-link-type="idl" href="#dom-layoutfragment-inlineoffset" id="ref-for-dom-layoutfragment-inlineoffset⑤">inlineOffset</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-layoutfragment-blockoffset" id="ref-for-dom-layoutfragment-blockoffset⑤">blockOffset</a></code>.</p>
       <li data-md>
        <p>The <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-4/#fragmentation-break" id="ref-for-fragmentation-break①">fragmentation break</a> information set to <var>fragmentResult</var>’s <code class="idl"><a data-link-type="idl" href="#dom-fragmentresult-internal-break-token-slot" id="ref-for-dom-fragmentresult-internal-break-token-slot①">[[internal break token]]</a></code>.</p>
       <li data-md>
        <p>Store <var>fragmentResult</var>’s <code class="idl"><a data-link-type="idl" href="#dom-fragmentresult-data-slot" id="ref-for-dom-fragmentresult-data-slot①">[[data]]</a></code> with the <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-3/#fragment" id="ref-for-fragment⑦">fragment</a>.</p>
      </ul>
    </ol>
   </div>
   <h4 class="heading settled" data-level="6.2.3" id="global-scope-selection"><span class="secno">6.2.3. </span><span class="content">Global Scope Selection</span><a class="self-link" href="#global-scope-selection"></a></h4>
   <p>When the user agent needs to select a <code class="idl"><a data-link-type="idl" href="#layoutworkletglobalscope" id="ref-for-layoutworkletglobalscope①⓪">LayoutWorkletGlobalScope</a></code> from the layout <a data-link-type="dfn" href="https://drafts.css-houdini.org/worklets/#worklets-workletglobalscopes" id="ref-for-worklets-workletglobalscopes②">worklet’s
WorkletGlobalScopes</a> <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list" id="ref-for-list⑧">list</a> it <em>must</em>:</p>
   <ul>
    <li data-md>
     <p>Select from at <em>least</em> two <code class="idl"><a data-link-type="idl" href="#layoutworkletglobalscope" id="ref-for-layoutworkletglobalscope①①">LayoutWorkletGlobalScope</a></code>s, unless the user agent is
under memory constraints.</p>
    <li data-md>
     <p><em>Not</em> re-use the same <code class="idl"><a data-link-type="idl" href="#layoutworkletglobalscope" id="ref-for-layoutworkletglobalscope①②">LayoutWorkletGlobalScope</a></code> more than 1000 times in a row.</p>
     <p class="note" role="note"><span>Note:</span> The 1000 limit was picked as a high upper bound, this limit may improve (downwards)
    over time.</p>
   </ul>
   <p class="note" role="note"><span>Note:</span> These rules exist to ensure that authors do not rely on being able to store state on the
    global object or non-regeneratable state on the class. See <a href="https://www.w3.org/TR/worklets-1/#code-idempotency">Worklets 1 §1.2 Code Idempotency</a>.</p>
   <h4 class="heading settled" data-level="6.2.4" id="utility-algorithms"><span class="secno">6.2.4. </span><span class="content">Utility Algorithms</span><a class="self-link" href="#utility-algorithms"></a></h4>
   <p>The section specifies algorithms common to the <a data-link-type="dfn" href="#determine-the-intrinsic-sizes" id="ref-for-determine-the-intrinsic-sizes③">determine the intrinsic sizes</a> and <a data-link-type="dfn" href="#generate-a-fragment" id="ref-for-generate-a-fragment③">generate
a fragment</a> algorithms.</p>
   <p class="note" role="note"><span>Note:</span> <a data-link-type="dfn" href="#get-a-document-layout-definition" id="ref-for-get-a-document-layout-definition④">Get a document layout definition</a> returns a <a data-link-type="dfn" href="#document-layout-definition" id="ref-for-document-layout-definition①">document layout definition</a> from the
  owning <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document" id="ref-for-concept-document③">document</a>.</p>
   <div class="algorithm" data-algorithm="get a document layout definition">
     When the user agent wants to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="get-a-document-layout-definition">get a document layout definition</dfn> given <var>name</var>, it <em>must</em> run the following steps: 
    <ol>
     <li data-md>
      <p>Let <var>documentLayoutDefinitionMap</var> be the associated <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document" id="ref-for-concept-document④">document’s</a> <a data-link-type="dfn" href="#document-layout-definitions" id="ref-for-document-layout-definitions①">document layout
definitions</a> map.</p>
     <li data-md>
      <p>If <var>documentLayoutDefinitionMap</var>[<var>name</var>] does not <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#map-exists" id="ref-for-map-exists③">exist</a>, return failure and
abort all these steps.</p>
     <li data-md>
      <p>Return the result of <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#map-get" id="ref-for-map-get②">get</a> <var>documentLayoutDefinitionMap</var>[<var>name</var>].</p>
    </ol>
   </div>
   <p class="note" role="note"><span>Note:</span> <a data-link-type="dfn" href="#get-a-layout-definition" id="ref-for-get-a-layout-definition⑦">Get a layout definition</a> returns a <a data-link-type="dfn" href="#layout-definition" id="ref-for-layout-definition①">layout definition</a> for a given <code class="idl"><a data-link-type="idl" href="#layoutworkletglobalscope" id="ref-for-layoutworkletglobalscope①③">LayoutWorkletGlobalScope</a></code>, it the desired definition doesn’t exist it will "invalidate" the <a data-link-type="dfn" href="#document-layout-definition" id="ref-for-document-layout-definition②">document layout definition</a>, (so that the layout can’t be used again), and return failure.</p>
   <div class="algorithm" data-algorithm="get a layout definition">
     When the user agent wants to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="get-a-layout-definition">get a layout definition</dfn> given <var>name</var>, and <var>workletGlobalScope</var>, it <em>must</em> run the following steps: 
    <ol>
     <li data-md>
      <p>Let <var>layoutDefinitionMap</var> be <var>workletGlobalScope</var>’s <a data-link-type="dfn" href="#layout-definitions" id="ref-for-layout-definitions①">layout definitions</a> map.</p>
     <li data-md>
      <p>If <var>layoutDefinitionMap</var>[<var>name</var>] does not <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#map-exists" id="ref-for-map-exists④">exist</a>, run the following steps:</p>
      <ol>
       <li data-md>
        <p><a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task" id="ref-for-queue-a-task①">Queue a task</a> to run the following steps:</p>
        <ol>
         <li data-md>
          <p>Let <var>documentLayoutDefinitionMap</var> be the associated <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document" id="ref-for-concept-document⑤">document’s</a> <a data-link-type="dfn" href="#document-layout-definition" id="ref-for-document-layout-definition③">document layout
definition</a> map.</p>
         <li data-md>
          <p><a data-link-type="dfn" href="https://infra.spec.whatwg.org/#map-set" id="ref-for-map-set④">Set</a> <var>documentLayoutDefinitionMap</var>[<var>name</var>] to <code>"invalid"</code>.</p>
         <li data-md>
          <p>The user agent <em>should</em> log an error to the debugging console stating that a
class wasn’t registered in all <code class="idl"><a data-link-type="idl" href="#layoutworkletglobalscope" id="ref-for-layoutworkletglobalscope①④">LayoutWorkletGlobalScope</a></code>s.</p>
        </ol>
       <li data-md>
        <p>Return failure, and abort all these steps.</p>
      </ol>
     <li data-md>
      <p>Return the result of <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-get-o-p" id="ref-for-sec-get-o-p⑥">get</a> <var>layoutDefinitionMap</var>[<var>name</var>].</p>
    </ol>
   </div>
   <p class="note" role="note"><span>Note:</span> <a data-link-type="dfn" href="#get-a-layout-class-instance" id="ref-for-get-a-layout-class-instance④">Get a layout class instance</a> returns an instance of the web developer provided class.
    (Registered in <code class="idl"><a data-link-type="idl" href="#dom-layoutworkletglobalscope-registerlayout" id="ref-for-dom-layoutworkletglobalscope-registerlayout⑥">registerLayout()</a></code>). If one isn’t present yet, it will create a new one. This
    algorithm may fail, as the constructor may throw an exception.</p>
   <div class="algorithm" data-algorithm="get a layout class instance">
     When the user agent wants to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="get-a-layout-class-instance">get a layout class instance</dfn> given <var>box</var>, <var>definition</var>, and <var>workletGlobalScope</var>, it <em>must</em> run the following steps: 
    <ol>
     <li data-md>
      <p>Let <var>layoutClassInstanceMap</var> be <var>box</var>’s <a data-link-type="dfn" href="#layout-class-instances" id="ref-for-layout-class-instances">layout class instances</a> map.</p>
     <li data-md>
      <p>Let <var>layoutInstance</var> be the result of <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-get-o-p" id="ref-for-sec-get-o-p⑦">get</a> <var>layoutClassInstanceMap</var>[<var>workletGlobalScope</var>].
If <var>layoutInstance</var> is null, run the following steps:</p>
      <ol>
       <li data-md>
        <p>If the <a data-link-type="dfn" href="#layout-definition-constructor-valid-flag" id="ref-for-layout-definition-constructor-valid-flag①">constructor valid flag</a> on <var>definition</var> is false, then return failure and
abort all these steps.</p>
       <li data-md>
        <p>Let <var>layoutCtor</var> be the <a data-link-type="dfn" href="#layout-definition-class-constructor" id="ref-for-layout-definition-class-constructor①">class constructor</a> on <var>definition</var>.</p>
       <li data-md>
        <p>Let <var>layoutInstance</var> be the result of <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-construct" id="ref-for-sec-construct">Construct</a>(<var>layoutCtor</var>).</p>
        <p>If <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-construct" id="ref-for-sec-construct①">construct</a> throws an exception, set the <var>definition</var>’s <a data-link-type="dfn" href="#layout-definition-constructor-valid-flag" id="ref-for-layout-definition-constructor-valid-flag②">constructor valid flag</a> to false, then return failure and abort all these steps.</p>
       <li data-md>
        <p><a data-link-type="dfn" href="https://infra.spec.whatwg.org/#map-set" id="ref-for-map-set⑤">Set</a> <var>layoutClassInstanceMap</var>[<var>workletGlobalScope</var>] to <var>layoutInstance</var>.</p>
      </ol>
     <li data-md>
      <p>Return <var>layoutInstance</var>.</p>
    </ol>
   </div>
   <div class="algorithm" data-algorithm="get a style map">
     When the user agent wants to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="get-a-style-map">get a style map</dfn> given <var>box</var>, and <var>inputProperties</var>, it <em>must</em> run the following steps: 
    <ol>
     <li data-md>
      <p>If <var>box</var>’s <a data-link-type="dfn" href="#stylemap" id="ref-for-stylemap①">styleMap</a> is null, then:</p>
      <ol>
       <li data-md>
        <p>Let <var>styleMap</var> be a new <code class="idl"><a data-link-type="idl" href="https://drafts.css-houdini.org/css-typed-om-1/#stylepropertymapreadonly" id="ref-for-stylepropertymapreadonly⑧">StylePropertyMapReadOnly</a></code> populated with <em>only</em> the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#computed-value" id="ref-for-computed-value①①">computed values</a> for properties listed in <var>inputProperties</var> for <var>box</var>.</p>
       <li data-md>
        <p>Set <var>box</var>’s <a data-link-type="dfn" href="#stylemap" id="ref-for-stylemap②">styleMap</a> internal slot to <var>styleMap</var>.</p>
      </ol>
     <li data-md>
      <p>Return <var>box</var>’s <code class="idl"><a data-link-type="idl" href="https://drafts.css-houdini.org/css-typed-om-1/#stylepropertymapreadonly" id="ref-for-stylepropertymapreadonly⑨">StylePropertyMapReadOnly</a></code> contained in the <a data-link-type="dfn" href="#stylemap" id="ref-for-stylemap③">styleMap</a> internal slot.</p>
    </ol>
   </div>
   <p><a data-link-type="dfn" href="#run-a-work-queue" id="ref-for-run-a-work-queue④">Run a work queue</a> is designed to allow user agents to work in both a single threaded, and
multi-threaded environment.</p>
   <p class="note" role="note"><span>Note:</span> <a data-link-type="dfn" href="#run-a-work-queue" id="ref-for-run-a-work-queue⑤">Run a work queue</a> processes <a data-link-type="dfn" href="#layout-api-work-task" id="ref-for-layout-api-work-task③">layout api work task</a>s enqueued with <code class="idl"><a data-link-type="idl" href="#dom-layoutchild-intrinsicsizes" id="ref-for-dom-layoutchild-intrinsicsizes②">intrinsicSizes()</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-layoutchild-layoutnextfragment" id="ref-for-dom-layoutchild-layoutnextfragment⑨">layoutNextFragment()</a></code>. It will continue
    processing tasks until the promise from the web developers layout or intrinsicSizes method is
    resolved, or the queue is empty after running the microtask queue.</p>
   <p>The result of running the queue will either be the result of the layout or intrinsicSizes
    method, or failure.</p>
   <div class="algorithm" data-algorithm="run a work queue">
     When the user agent wants to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="run-a-work-queue">run a work queue</dfn> given <var>promise</var>, and <var>workQueue</var>, it <em>must</em> run the following steps: 
    <ol>
     <li data-md>
      <p>If <var>promise</var> is not a promise, return failure.</p>
     <li data-md>
      <p><a data-link-type="dfn" href="https://infra.spec.whatwg.org/#iteration-while" id="ref-for-iteration-while">While</a> <var>workQueue</var> is not <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list-empty" id="ref-for-list-empty①">empty</a>, and <var>promise</var> is pending:</p>
      <ol>
       <li data-md>
        <p><a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list-iterate" id="ref-for-list-iterate④">For each</a> <var>task</var> in <var>workQueue</var>:</p>
        <ol>
         <li data-md>
          <p>Let <var>layoutChild</var> be <var>task</var>’s <a data-link-type="dfn" href="#layout-api-work-task-layout-child" id="ref-for-layout-api-work-task-layout-child②">layout child</a>.</p>
         <li data-md>
          <p>Let <var>box</var> be <var>layoutChild</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#box" id="ref-for-box②②">box</a> in the <code class="idl"><a data-link-type="idl" href="#dom-layoutchild-box-slot" id="ref-for-dom-layoutchild-box-slot③">[[box]]</a></code> internal slot.</p>
         <li data-md>
          <p>Let <var>childPromise</var> be <var>task</var>’s <a data-link-type="dfn" href="#layout-api-work-task-promise" id="ref-for-layout-api-work-task-promise②">promise</a>.</p>
         <li data-md>
          <p>If <var>task</var>’s <a data-link-type="dfn" href="#layout-api-work-task-task-type" id="ref-for-layout-api-work-task-task-type②">task type</a> is <code>"layout"</code>,</p>
          <ul>
           <li data-md>
            <p>Then <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task" id="ref-for-queue-a-task②">queue a task</a>, or run synchronously, the following substeps:</p>
            <ol>
             <li data-md>
              <p>Let <var>childConstraints</var> be <var>task</var>’s <a data-link-type="dfn" href="#layout-api-work-task-layout-constraints" id="ref-for-layout-api-work-task-layout-constraints①">layout constraints</a>.</p>
             <li data-md>
              <p>Let <var>childBreakToken</var> be <var>task</var>’s <a data-link-type="dfn" href="#layout-api-work-task-child-break-token" id="ref-for-layout-api-work-task-child-break-token①">child break token</a>.</p>
             <li data-md>
              <p>Let <var>targetRealm</var> be <var>layoutChild</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-global-object-realm" id="ref-for-concept-global-object-realm">Realm</a>.</p>
             <li data-md>
              <p>Let <var>internalFragment</var> be the result of the user agent producing a <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-3/#fragment" id="ref-for-fragment⑧">fragment</a> based on <var>box</var>, <var>childConstraints</var>, and <var>childBreakToken</var>.</p>
              <p>Invoking <a data-link-type="dfn" href="#translate-a-layoutconstraintsoptions-to-internal-constraints" id="ref-for-translate-a-layoutconstraintsoptions-to-internal-constraints①">translate a LayoutConstraintsOptions to internal constraints</a> given <var>childConstraints</var>, must be run to translate the given <code class="idl"><a data-link-type="idl" href="#dictdef-layoutconstraintsoptions" id="ref-for-dictdef-layoutconstraintsoptions⑤">LayoutConstraintsOptions</a></code> into the internal constraints for the user
agent’s layout engine.</p>
             <li data-md>
              <p>Let <var>fragment</var> be a new <code class="idl"><a data-link-type="idl" href="#layoutfragment" id="ref-for-layoutfragment②⑥">LayoutFragment</a></code> with:</p>
              <ul>
               <li data-md>
                <p><code class="idl"><a data-link-type="idl" href="#dom-layoutfragment-inlinesize" id="ref-for-dom-layoutfragment-inlinesize③">inlineSize</a></code> being <var>internalFragment</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-size" id="ref-for-inline-size④">inline size</a> relative to the <a data-link-type="dfn" href="#current-layout" id="ref-for-current-layout②⑥">current layout’s</a> writing mode.</p>
               <li data-md>
                <p><code class="idl"><a data-link-type="idl" href="#dom-layoutfragment-blocksize" id="ref-for-dom-layoutfragment-blocksize③">blockSize</a></code> being <var>internalFragment</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-size" id="ref-for-block-size⑥">block size</a> relative to the <a data-link-type="dfn" href="#current-layout" id="ref-for-current-layout②⑦">current layout’s</a> writing mode.</p>
               <li data-md>
                <p><code class="idl"><a data-link-type="idl" href="#dom-layoutfragment-inlineoffset" id="ref-for-dom-layoutfragment-inlineoffset⑥">inlineOffset</a></code> initially set to 0.</p>
               <li data-md>
                <p><code class="idl"><a data-link-type="idl" href="#dom-layoutfragment-blockoffset" id="ref-for-dom-layoutfragment-blockoffset⑥">blockOffset</a></code> initially set to 0.</p>
               <li data-md>
                <p><code class="idl"><a data-link-type="idl" href="#dom-layoutfragment-breaktoken" id="ref-for-dom-layoutfragment-breaktoken⑥">breakToken</a></code> being a new <code class="idl"><a data-link-type="idl" href="#childbreaktoken" id="ref-for-childbreaktoken⑧">ChildBreakToken</a></code> representing <var>internalFragment</var>’s internal break token, if any.</p>
               <li data-md>
                <p>If <var>internalFragment</var> has a <var>clonedData</var> object stored with it, let <code class="idl"><a data-link-type="idl" href="#dom-layoutfragment-data" id="ref-for-dom-layoutfragment-data①">data</a></code> being the result of <a data-link-type="dfn" href="https://html.spec.whatwg.org/#structureddeserialize" id="ref-for-structureddeserialize">StructuredDeserialize</a>(<var>clonedData</var>, <var>targetRealm</var>), otherwise null.</p>
              </ul>
             <li data-md>
              <p>Resolve <var>childPromise</var> with <var>fragment</var>.</p>
            </ol>
           <li data-md>
            <p>Otherwise <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task" id="ref-for-queue-a-task③">queue a task</a>, or run synchronously, the following substeps:</p>
            <ol>
             <li data-md>
              <p>Let <var>internalIntrinsicSizes</var> be the result of the user agent calculating the <b>border box</b> min/max content contribution of <var>box</var>.</p>
             <li data-md>
              <p>Let <var>intrinsicSizes</var> be a new <code class="idl"><a data-link-type="idl" href="#intrinsicsizes" id="ref-for-intrinsicsizes②">IntrinsicSizes</a></code> with:</p>
              <ul>
               <li data-md>
                <p><code class="idl"><a data-link-type="idl" href="#dom-intrinsicsizes-mincontentsize" id="ref-for-dom-intrinsicsizes-mincontentsize②">minContentSize</a></code> being <var>internalIntrinsicSizes</var>’ <b>border box</b> min-content contribution, relative to the <a data-link-type="dfn" href="#current-layout" id="ref-for-current-layout②⑧">current
layout’s</a> writing mode.</p>
               <li data-md>
                <p><code class="idl"><a data-link-type="idl" href="#dom-intrinsicsizes-maxcontentsize" id="ref-for-dom-intrinsicsizes-maxcontentsize②">maxContentSize</a></code> being <var>internalIntrinsicSizes</var>’s <b>border box</b> max-content contribution, relative to the <a data-link-type="dfn" href="#current-layout" id="ref-for-current-layout②⑨">current
layout’s</a> writing mode.</p>
              </ul>
             <li data-md>
              <p>Resolve <var>childPromise</var> with <var>intrinsicSizes</var>.</p>
            </ol>
          </ul>
        </ol>
       <li data-md>
        <p>Wait (optionally <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/infrastructure.html#in-parallel" id="ref-for-in-parallel④">in parallel</a>) for all of the above tasks to complete.</p>
        <p class="note" role="note"><span>Note:</span> If the tasks were perform synchronously, then this step is a no-op.</p>
       <li data-md>
        <p><a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list-empty" id="ref-for-list-empty②">Empty</a> <var>workQueue</var>.</p>
       <li data-md>
        <p><a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#perform-a-microtask-checkpoint" id="ref-for-perform-a-microtask-checkpoint">Perform a microtask checkpoint</a>.</p>
      </ol>
     <li data-md>
      <p>If <var>promise</var> isn’t fulfilled (it is pending, or got rejected), return failure.</p>
     <li data-md>
      <p>Return the fulfilled value of <var>promise</var>.</p>
    </ol>
   </div>
   <h2 class="heading settled" data-level="7" id="examples"><span class="secno">7. </span><span class="content">Examples</span><a class="self-link" href="#examples"></a></h2>
   <div class="example" id="example-c28dfd2e">
    <a class="self-link" href="#example-c28dfd2e"></a> The layout algorithm below performs a block-like layout (positioning fragments sequentially in the
block direction), while centering its children in the inline direction. 
<pre class="lang-javascript highlight">registerLayout<c- p>(</c-><c- t>'block-like'</c-><c- p>,</c-> <c- kr>class</c-> <c- p>{</c->
    async intrinsicSizes<c- p>(</c->children<c- p>,</c-> edges<c- p>,</c-> styleMap<c- p>)</c-> <c- p>{</c->
      <c- kr>const</c-> childrenSizes <c- o>=</c-> await Promise<c- p>.</c->all<c- p>(</c->children<c- p>.</c->map<c- p>((</c->child<c- p>)</c-> <c- p>=></c-> <c- p>{</c->
          <c- k>return</c-> child<c- p>.</c->intrinsicSizes<c- p>();</c->
      <c- p>}));</c->

      <c- kr>const</c-> maxContentSize <c- o>=</c-> childrenSizes<c- p>.</c->reduce<c- p>((</c->max<c- p>,</c-> childSizes<c- p>)</c-> <c- p>=></c-> <c- p>{</c->
          <c- k>return</c-> Math<c- p>.</c->max<c- p>(</c->max<c- p>,</c-> childSizes<c- p>.</c->maxContentSize<c- p>);</c->
      <c- p>},</c-> <c- mi>0</c-><c- p>)</c-> <c- o>+</c-> edges<c- p>.</c->inline<c- p>;</c->

      <c- kr>const</c-> minContentSize <c- o>=</c-> childrenSizes<c- p>.</c->reduce<c- p>((</c->max<c- p>,</c-> childSizes<c- p>)</c-> <c- p>=></c-> <c- p>{</c->
          <c- k>return</c-> Math<c- p>.</c->max<c- p>(</c->max<c- p>,</c-> childSizes<c- p>.</c->minContentSize<c- p>);</c->
      <c- p>},</c-> <c- mi>0</c-><c- p>)</c-> <c- o>+</c-> edges<c- p>.</c->inline<c- p>;</c->

      <c- k>return</c-> <c- p>{</c->maxContentSize<c- p>,</c-> minContentSize<c- p>};</c->
    <c- p>}</c->

    async layout<c- p>(</c->children<c- p>,</c-> edges<c- p>,</c-> constraints<c- p>,</c-> styleMap<c- p>)</c-> <c- p>{</c->
        <c- c1>// Determine our (inner) available size.</c->
        <c- kr>const</c-> availableInlineSize <c- o>=</c-> constraints<c- p>.</c->fixedInlineSize <c- o>-</c-> edges<c- p>.</c->inline<c- p>;</c->
        <c- kr>const</c-> availableBlockSize <c- o>=</c-> constraints<c- p>.</c->fixedBlockSize <c- o>?</c->
            constraints<c- p>.</c->fixedBlockSize <c- o>-</c-> edges<c- p>.</c->block <c- o>:</c-> <c- kc>null</c-><c- p>;</c->

        <c- kr>const</c-> childFragments <c- o>=</c-> <c- p>[];</c->
        <c- kr>const</c-> childConstraints <c- o>=</c-> <c- p>{</c-> availableInlineSize<c- p>,</c-> availableBlockSize <c- p>};</c->

        <c- kr>const</c-> childFragments <c- o>=</c-> await Promise<c- p>.</c->all<c- p>(</c->children<c- p>.</c->map<c- p>((</c->child<c- p>)</c-> <c- p>=></c-> <c- p>{</c->
            <c- k>return</c-> child<c- p>.</c->layoutNextFragment<c- p>(</c->childConstraints<c- p>);</c->
        <c- p>}));</c->

        <c- a>let</c-> blockOffset <c- o>=</c-> edges<c- p>.</c->blockStart<c- p>;</c->
        <c- k>for</c-> <c- p>(</c-><c- a>let</c-> fragment <c- k>of</c-> childFragments<c- p>)</c-> <c- p>{</c->
            <c- c1>// Position the fragment in a block like manner, centering it in the</c->
            <c- c1>// inline direction.</c->
            fragment<c- p>.</c->blockOffset <c- o>=</c-> blockOffset<c- p>;</c->
            fragment<c- p>.</c->inlineOffset <c- o>=</c-> Math<c- p>.</c->max<c- p>(</c->
                edges<c- p>.</c->inlineStart<c- p>,</c->
                <c- p>(</c->availableInlineSize <c- o>-</c-> fragment<c- p>.</c->inlineSize<c- p>)</c-> <c- o>/</c-> <c- mi>2</c-><c- p>);</c->

            blockOffset <c- o>+=</c-> fragment<c- p>.</c->blockSize<c- p>;</c->
        <c- p>}</c->

        <c- kr>const</c-> autoBlockSize <c- o>=</c-> blockOffset <c- o>+</c-> edges<c- p>.</c->blockEnd<c- p>;</c->

        <c- k>return</c-> <c- p>{</c->
            autoBlockSize<c- p>,</c->
            childFragments<c- p>,</c->
        <c- p>};</c->
    <c- p>}</c->
<c- p>});</c->
</pre>
   </div>
   <div class="example" id="example-223b1071">
    <a class="self-link" href="#example-223b1071"></a> The layout algorithm performs a flexbox-like distribution of spare space in the inline direction. It
creates child layout constraints which specify that a child should be a fixed inline size. 
<pre class="lang-javascript highlight">registerLayout<c- p>(</c-><c- t>'flex-distribution-like'</c-><c- p>,</c-> <c- kr>class</c-> <c- p>{</c->
    async intrinsicSizes<c- p>(</c->children<c- p>,</c-> edges<c- p>,</c-> styleMap<c- p>)</c-> <c- p>{</c->
      <c- kr>const</c-> childrenSizes <c- o>=</c-> await Promise<c- p>.</c->all<c- p>(</c->children<c- p>.</c->map<c- p>((</c->child<c- p>)</c-> <c- p>=></c-> <c- p>{</c->
          <c- k>return</c-> child<c- p>.</c->intrinsicSizes<c- p>();</c->
      <c- p>}));</c->

      <c- kr>const</c-> maxContentSize <c- o>=</c-> childrenSizes<c- p>.</c->reduce<c- p>((</c->sum<c- p>,</c-> childSizes<c- p>)</c-> <c- p>=></c-> <c- p>{</c->
          <c- k>return</c-> sum <c- o>+</c-> childSizes<c- p>.</c->maxContentSize<c- p>;</c->
      <c- p>},</c-> <c- mi>0</c-><c- p>)</c-> <c- o>+</c-> edges<c- p>.</c->inline<c- p>;</c->

      <c- kr>const</c-> minContentSize <c- o>=</c-> childrenSizes<c- p>.</c->reduce<c- p>((</c->max<c- p>,</c-> childSizes<c- p>)</c-> <c- p>=></c-> <c- p>{</c->
          <c- k>return</c-> sum <c- o>+</c-> childSizes<c- p>.</c->minContentSize<c- p>;</c->
      <c- p>},</c-> <c- mi>0</c-><c- p>)</c-> <c- o>+</c-> edges<c- p>.</c->inline<c- p>;</c->

      <c- k>return</c-> <c- p>{</c->maxContentSize<c- p>,</c-> minContentSize<c- p>};</c->
    <c- p>}</c->

    async layout<c- p>(</c->children<c- p>,</c-> edges<c- p>,</c-> constraints<c- p>,</c-> styleMap<c- p>)</c-> <c- p>{</c->
        <c- c1>// Determine our (inner) available size.</c->
        <c- kr>const</c-> availableInlineSize <c- o>=</c->
            constraints<c- p>.</c->fixedInlineSize <c- o>-</c-> edges<c- p>.</c->inline<c- p>;</c->
        <c- kr>const</c-> availableBlockSize <c- o>=</c-> constraints<c- p>.</c->fixedBlockSize <c- o>?</c->
            constraints<c- p>.</c->fixedBlockSize <c- o>-</c-> edges<c- p>.</c->block <c- o>:</c-> <c- kc>null</c-><c- p>;</c->

        <c- kr>const</c-> childConstraints <c- o>=</c-> <c- p>{</c-> availableInlineSize<c- p>,</c-> availableBlockSize <c- p>};</c->

        <c- kr>const</c-> unconstrainedChildFragments <c- o>=</c-> await Promise<c- p>.</c->all<c- p>(</c->children<c- p>.</c->map<c- p>((</c->child<c- p>)</c-> <c- p>=></c-> <c- p>{</c->
            <c- k>return</c-> child<c- p>.</c->layoutNextFragment<c- p>(</c->childConstraints<c- p>);</c->
        <c- p>}));</c->

        <c- kr>const</c-> unconstrainedSizes <c- o>=</c-> <c- p>[];</c->
        <c- kr>const</c-> totalSize <c- o>=</c-> unconstrainedChildFragments<c- p>.</c->reduce<c- p>((</c->sum<c- p>,</c-> fragment<c- p>,</c-> i<c- p>)</c-> <c- p>=></c-> <c- p>{</c->
            unconstrainedSizes<c- p>[</c->i<c- p>]</c-> <c- o>=</c-> fragment<c- p>.</c->inlineSize<c- p>;</c->
            <c- k>return</c-> sum <c- o>+</c-> fragment<c- p>.</c->inlineSize<c- p>;</c->
        <c- p>},</c-> <c- mi>0</c-><c- p>);</c->

        <c- c1>// Distribute spare space between children.</c->
        <c- kr>const</c-> remainingSpace <c- o>=</c-> Math<c- p>.</c->max<c- p>(</c-><c- mi>0</c-><c- p>,</c-> inlineSize <c- o>-</c-> totalSize<c- p>);</c->
        <c- kr>const</c-> extraSpace <c- o>=</c-> remainingSpace <c- o>/</c-> children<c- p>.</c->length<c- p>;</c->

        <c- kr>const</c-> childFragments <c- o>=</c-> await Promise<c- p>.</c->all<c- p>(</c->children<c- p>.</c->map<c- p>((</c->child<c- p>,</c-> i<c- p>)</c-> <c- p>=></c-> <c- p>{</c->
            <c- k>return</c-> child<c- p>.</c->layoutNextFragment<c- p>({</c->
                fixedInlineSize<c- o>:</c-> unconstrainedSizes<c- p>[</c->i<c- p>]</c-> <c- o>+</c-> extraSpace<c- p>,</c->
                availableBlockSize
            <c- p>});</c->
        <c- p>}));</c->

        <c- c1>// Position the fragments.</c->
        <c- a>let</c-> inlineOffset <c- o>=</c-> <c- mi>0</c-><c- p>;</c->
        <c- a>let</c-> maxChildBlockSize <c- o>=</c-> <c- mi>0</c-><c- p>;</c->
        <c- k>for</c-> <c- p>(</c-><c- a>let</c-> fragment <c- k>of</c-> childFragments<c- p>)</c-> <c- p>{</c->
            fragment<c- p>.</c->inlineOffset <c- o>=</c-> inlineOffset<c- p>;</c->
            fragment<c- p>.</c->blockOffset <c- o>=</c-> edges<c- p>.</c->blockStart<c- p>;</c->

            inlineOffset <c- o>+=</c-> fragment<c- p>.</c->inlineSize<c- p>;</c->
            maxChildBlockSize <c- o>=</c-> Math<c- p>.</c->max<c- p>(</c->maxChildBlockSize<c- p>,</c-> fragment<c- p>.</c->blockSize<c- p>);</c->
        <c- p>}</c->

        <c- k>return</c-> <c- p>{</c->
            autoBlockSize<c- o>:</c-> maxChildBlockSize <c- o>+</c-> edges<c- p>.</c->block<c- p>,</c->
            childFragments<c- p>,</c->
        <c- p>};</c->
    <c- p>}</c->
<c- p>});</c->
</pre>
   </div>
   <div class="example" id="example-412c6264">
    <a class="self-link" href="#example-412c6264"></a> This example shows a simple layout which indents child fragments for a certain number of
lines. 
    <p>This example also demonstrates using the previous <code class="idl"><a data-link-type="idl" href="#dom-layoutfragment-breaktoken" id="ref-for-dom-layoutfragment-breaktoken⑦">breakToken</a></code> of a <code class="idl"><a data-link-type="idl" href="#layoutfragment" id="ref-for-layoutfragment②⑦">LayoutFragment</a></code> to produce the next fragment for the <code class="idl"><a data-link-type="idl" href="#layoutchild" id="ref-for-layoutchild④①">LayoutChild</a></code>.</p>
    <p>It also demonstrates using the <code class="idl"><a data-link-type="idl" href="#breaktoken" id="ref-for-breaktoken①">BreakToken</a></code> to respect the <code class="idl"><a data-link-type="idl" href="#layoutconstraints" id="ref-for-layoutconstraints①⓪">LayoutConstraints</a></code>' <code class="idl"><a data-link-type="idl" href="#dom-layoutconstraints-blockfragmentationtype" id="ref-for-dom-layoutconstraints-blockfragmentationtype⑤">blockFragmentationType</a></code>, it resumes it layout from the previous <code class="idl"><a data-link-type="idl" href="#breaktoken" id="ref-for-breaktoken②">BreakToken</a></code>.
It returns a <code class="idl"><a data-link-type="idl" href="#dictdef-fragmentresultoptions" id="ref-for-dictdef-fragmentresultoptions⑦">FragmentResultOptions</a></code> with a <code class="idl"><a data-link-type="idl" href="#dom-fragmentresultoptions-breaktoken" id="ref-for-dom-fragmentresultoptions-breaktoken①">breakToken</a></code> which is used to
resume the layout.</p>
<pre class="lang-javascript highlight">registerLayout<c- p>(</c-><c- t>'indent-lines'</c-><c- p>,</c-> <c- kr>class</c-> <c- p>{</c->
    <c- kr>static</c-> layoutOptions <c- o>=</c-> <c- p>{</c->childDisplay<c- o>:</c-> <c- t>'normal'</c-><c- p>};</c->
    <c- kr>static</c-> inputProperties <c- o>=</c-> <c- p>[</c-><c- t>'--indent'</c-><c- p>,</c-> <c- t>'--indent-lines'</c-><c- p>];</c->

    async layout<c- p>(</c->children<c- p>,</c-> edges<c- p>,</c-> constraints<c- p>,</c-> styleMap<c- p>,</c-> breakToken<c- p>)</c-> <c- p>{</c->
        <c- c1>// Determine our (inner) available size.</c->
        <c- kr>const</c-> availableInlineSize <c- o>=</c->
            constraints<c- p>.</c->fixedInlineSize <c- o>-</c-> edges<c- p>.</c->inline<c- p>;</c->
        <c- kr>const</c-> availableBlockSize <c- o>=</c-> constraints<c- p>.</c->fixedBlockSize <c- o>?</c->
            constraints<c- p>.</c->fixedBlockSize <c- o>-</c-> edges<c- p>.</c->block <c- o>:</c-> <c- kc>null</c-><c- p>;</c->

        <c- c1>// Detrermine the number of lines to indent, and the indent amount.</c->
        <c- kr>const</c-> indent <c- o>=</c-> resolveLength<c- p>(</c->constraints<c- p>,</c-> styleMap<c- p>.</c->get<c- p>(</c-><c- t>'--indent'</c-><c- p>));</c->
        <c- a>let</c-> lines <c- o>=</c-> styleMap<c- p>.</c->get<c- p>(</c-><c- t>'--indent-lines'</c-><c- p>).</c->value<c- p>;</c->

        <c- kr>const</c-> childFragments <c- o>=</c-> <c- p>[];</c->

        <c- a>let</c-> childBreakToken <c- o>=</c-> <c- kc>null</c-><c- p>;</c->
        <c- k>if</c-> <c- p>(</c->breakToken<c- p>)</c-> <c- p>{</c->
            childBreakToken <c- o>=</c-> breakToken<c- p>.</c->childBreakTokens<c- p>[</c-><c- mi>0</c-><c- p>];</c->

            <c- c1>// Remove all the children we have already produced fragments for.</c->
            children<c- p>.</c->splice<c- p>(</c-><c- mi>0</c-><c- p>,</c-> children<c- p>.</c->indexOf<c- p>(</c->childBreakToken<c- p>.</c->child<c- p>));</c->
        <c- p>}</c->

        <c- a>let</c-> blockOffset <c- o>=</c-> edges<c- p>.</c->blockStart<c- p>;</c->
        <c- a>let</c-> child <c- o>=</c-> children<c- p>.</c->shift<c- p>();</c->
        <c- k>while</c-> <c- p>(</c->child<c- p>)</c-> <c- p>{</c->
            <c- kr>const</c-> shouldIndent <c- o>=</c-> lines<c- o>--</c-> <c- o>></c-> <c- mi>0</c-><c- p>;</c->

            <c- c1>// Adjust the inline size for the indent.</c->
            <c- kr>const</c-> childAvailableInlineSize <c- o>=</c-> shouldIndent <c- o>?</c->
                availableInlineSize <c- o>-</c-> indent <c- o>:</c-> availableInlineSize<c- p>;</c->

            <c- kr>const</c-> childConstraints <c- o>=</c-> <c- p>{</c->
                availableInlineSize<c- o>:</c-> childAvailableInlineSize<c- p>,</c->
                availableBlockSize<c- p>,</c->
                percentageInlineSize<c- o>:</c-> availableInlineSize<c- p>,</c->
                blockFragmentationType<c- o>:</c-> constraints<c- p>.</c->blockFragmentationType<c- p>,</c->
            <c- p>};</c->

            <c- kr>const</c-> fragment <c- o>=</c-> await child<c- p>.</c->layoutNextFragment<c- p>(</c->childConstraints<c- p>,</c->
                                                            childBreakToken<c- p>);</c->
            childFragments<c- p>.</c->push<c- p>(</c->fragment<c- p>);</c->

            <c- c1>// Position the fragment.</c->
            fragment<c- p>.</c->inlineOffset <c- o>=</c-> shouldIndent <c- o>?</c->
                edges<c- p>.</c->inlineStart <c- o>+</c-> indent <c- o>:</c-> edges<c- p>.</c->inlineStart<c- p>;</c->
            fragment<c- p>.</c->blockOffset <c- o>=</c-> blockOffset<c- p>;</c->
            blockOffset <c- o>+=</c-> fragment<c- p>.</c->blockSize<c- p>;</c->

            <c- c1>// Check if we have gone over the block fragmentation limit.</c->
            <c- k>if</c-> <c- p>(</c->constraints<c- p>.</c->blockFragmentationType <c- o>!=</c-> <c- t>'none'</c-> <c- o>&amp;&amp;</c->
                blockOffset <c- o>></c-> constraints<c- p>.</c->blockSize<c- p>)</c-> <c- p>{</c->
                <c- k>break</c-><c- p>;</c->
            <c- p>}</c->

            <c- k>if</c-> <c- p>(</c->fragment<c- p>.</c->breakToken<c- p>)</c-> <c- p>{</c->
                childBreakToken <c- o>=</c-> fragment<c- p>.</c->breakToken<c- p>;</c->
            <c- p>}</c-> <c- k>else</c-> <c- p>{</c->
                <c- c1>// If a fragment doesn’t have a break token, we move onto the</c->
                <c- c1>// next child.</c->
                child <c- o>=</c-> children<c- p>.</c->shift<c- p>();</c->
                childBreakToken <c- o>=</c-> <c- kc>null</c-><c- p>;</c->
            <c- p>}</c->
        <c- p>}</c->

        <c- kr>const</c-> autoBlockSize <c- o>=</c-> blockOffset <c- o>+</c-> edges<c- p>.</c->blockEnd<c- p>;</c->

        <c- c1>// Return our fragment.</c->
        <c- kr>const</c-> result <c- o>=</c-> <c- p>{</c->
            autoBlockSize<c- p>,</c->
            childFragments<c- o>:</c-> childFragments<c- p>,</c->
        <c- p>}</c->

        <c- k>if</c-> <c- p>(</c->childBreakToken<c- p>)</c-> <c- p>{</c->
            result<c- p>.</c->breakToken <c- o>=</c-> <c- p>{</c->
                childBreakTokens<c- o>:</c-> <c- p>[</c->childBreakToken<c- p>],</c->
            <c- p>};</c->
        <c- p>}</c->

        <c- k>return</c-> result<c- p>;</c->
    <c- p>}</c->
<c- p>});</c->
</pre>
   </div>
   <h2 class="heading settled" data-level="8" id="security-considerations"><span class="secno">8. </span><span class="content">Security Considerations</span><a class="self-link" href="#security-considerations"></a></h2>
   <p>There are no known security issues introduced by these features.</p>
   <h2 class="heading settled" data-level="9" id="privacy-considerations"><span class="secno">9. </span><span class="content">Privacy Considerations</span><a class="self-link" href="#privacy-considerations"></a></h2>
   <p>There are no known privacy issues introduced by these features.</p>
  </main>
  <h2 class="no-ref no-num heading settled" id="conformance"><span class="content"> Conformance</span><a class="self-link" href="#conformance"></a></h2>
  <h3 class="no-ref heading settled" id="conventions"><span class="content"> Document conventions</span><a class="self-link" href="#conventions"></a></h3>
  <p>Conformance requirements are expressed with a combination of
    descriptive assertions and RFC 2119 terminology. The key words “MUST”,
    “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
    “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
    document are to be interpreted as described in RFC 2119.
    However, for readability, these words do not appear in all uppercase
    letters in this specification. </p>
  <p>All of the text of this specification is normative except sections
    explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a></p>
  <p>Examples in this specification are introduced with the words “for example”
    or are set apart from the normative text with <code>class="example"</code>,
    like this: </p>
  <div class="example" id="example-ae2b6bc0">
   <a class="self-link" href="#example-ae2b6bc0"></a> 
   <p>This is an example of an informative example.</p>
  </div>
  <p>Informative notes begin with the word “Note” and are set apart from the
    normative text with <code>class="note"</code>, like this: </p>
  <p class="note" role="note">Note, this is an informative note.</p>
  <p>Advisements are normative sections styled to evoke special attention and are
    set apart from other normative text with <code>&lt;strong class="advisement"></code>, like
    this: <strong class="advisement"> UAs MUST provide an accessible alternative. </strong> </p>
  <h3 class="no-ref heading settled" id="conformance-classes"><span class="content"> Conformance classes</span><a class="self-link" href="#conformance-classes"></a></h3>
  <p>Conformance to this specification
    is defined for three conformance classes: </p>
  <dl>
   <dt>style sheet 
   <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
            style sheet</a>. 
   <dt>renderer 
   <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> that interprets the semantics of a style sheet and renders
            documents that use them. 
   <dt>authoring tool 
   <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> that writes a style sheet. 
  </dl>
  <p>A style sheet is conformant to this specification
    if all of its statements that use syntax defined in this module are valid
    according to the generic CSS grammar and the individual grammars of each
    feature defined in this module. </p>
  <p>A renderer is conformant to this specification
    if, in addition to interpreting the style sheet as defined by the
    appropriate specifications, it supports all the features defined
    by this specification by parsing them correctly
    and rendering the document accordingly. However, the inability of a
    UA to correctly render a document due to limitations of the device
    does not make the UA non-conformant. (For example, a UA is not
    required to render color on a monochrome monitor.) </p>
  <p>An authoring tool is conformant to this specification
    if it writes style sheets that are syntactically correct according to the
    generic CSS grammar and the individual grammars of each feature in
    this module, and meet all other conformance requirements of style sheets
    as described in this module. </p>
  <h3 class="no-ref heading settled" id="partial"><span class="content"> Partial implementations</span><a class="self-link" href="#partial"></a></h3>
  <p>So that authors can exploit the forward-compatible parsing rules to
    assign fallback values, CSS renderers <strong>must</strong> treat as invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore
    as appropriate</a>) any at-rules, properties, property values, keywords,
    and other syntactic constructs for which they have no usable level of
    support. In particular, user agents <strong>must not</strong> selectively
    ignore unsupported component values and honor supported values in a single
    multi-value property declaration: if any value is considered invalid
    (as unsupported values must be), CSS requires that the entire declaration
    be ignored.</p>
  <h4 class="heading settled" id="conform-future-proofing"><span class="content"> Implementations of Unstable and Proprietary Features</span><a class="self-link" href="#conform-future-proofing"></a></h4>
  <p>To avoid clashes with future stable CSS features,
        the CSSWG recommends <a href="http://www.w3.org/TR/CSS/#future-proofing">following best practices</a> for the implementation of <a href="http://www.w3.org/TR/CSS/#unstable">unstable</a> features and <a href="http://www.w3.org/TR/CSS/#proprietary-extension">proprietary extensions</a> to CSS. </p>
  <h3 class="no-ref heading settled" id="testing"><span class="content"> Non-experimental implementations</span><a class="self-link" href="#testing"></a></h3>
  <p>Once a specification reaches the Candidate Recommendation stage,
    non-experimental implementations are possible, and implementors should
    release an unprefixed implementation of any CR-level feature they
    can demonstrate to be correctly implemented according to spec. </p>
  <p>To establish and maintain the interoperability of CSS across
    implementations, the CSS Working Group requests that non-experimental
    CSS renderers submit an implementation report (and, if necessary, the
    testcases used for that implementation report) to the W3C before
    releasing an unprefixed implementation of any CSS features. Testcases
    submitted to W3C are subject to review and correction by the CSS
    Working Group. </p>
  <p>
   Further information on submitting testcases and implementation reports
    can be found from on the CSS Working Group’s website at <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
    Questions should be directed to the <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> mailing list. 
<script src="https://www.w3.org/scripts/TR/2016/fixup.js"></script>
  </p>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
  <ul class="index">
   <li><a href="#dom-fragmentresultoptions-autoblocksize">autoBlockSize</a><span>, in §6.2</span>
   <li>
    availableBlockSize
    <ul>
     <li><a href="#dom-layoutconstraints-availableblocksize">attribute for LayoutConstraints</a><span>, in §4.4</span>
     <li><a href="#dom-layoutconstraintsoptions-availableblocksize">dict-member for LayoutConstraintsOptions</a><span>, in §4.4.1</span>
    </ul>
   <li>
    availableInlineSize
    <ul>
     <li><a href="#dom-layoutconstraints-availableinlinesize">attribute for LayoutConstraints</a><span>, in §4.4</span>
     <li><a href="#dom-layoutconstraintsoptions-availableinlinesize">dict-member for LayoutConstraintsOptions</a><span>, in §4.4.1</span>
    </ul>
   <li><a href="#dom-layoutedges-block">block</a><span>, in §4.6</span>
   <li><a href="#dom-childdisplaytype-block">"block"</a><span>, in §3.2</span>
   <li><a href="#dom-layoutedges-blockend">blockEnd</a><span>, in §4.6</span>
   <li>
    blockFragmentationOffset
    <ul>
     <li><a href="#dom-layoutconstraints-blockfragmentationoffset">attribute for LayoutConstraints</a><span>, in §4.4</span>
     <li><a href="#dom-layoutconstraintsoptions-blockfragmentationoffset">dict-member for LayoutConstraintsOptions</a><span>, in §4.4.1</span>
    </ul>
   <li>
    blockFragmentationType
    <ul>
     <li><a href="#dom-layoutconstraints-blockfragmentationtype">attribute for LayoutConstraints</a><span>, in §4.4</span>
     <li><a href="#dom-layoutconstraintsoptions-blockfragmentationtype">dict-member for LayoutConstraintsOptions</a><span>, in §4.4.1</span>
    </ul>
   <li><a href="#enumdef-blockfragmentationtype">BlockFragmentationType</a><span>, in §4.4</span>
   <li><a href="#dom-layoutsizingmode-block-like">"block-like"</a><span>, in §3.2</span>
   <li><a href="#dom-layoutfragment-blockoffset">blockOffset</a><span>, in §4.2</span>
   <li>
    blockSize
    <ul>
     <li><a href="#dom-fragmentresult-blocksize">attribute for FragmentResult</a><span>, in §6.2</span>
     <li><a href="#dom-layoutfragment-blocksize">attribute for LayoutFragment</a><span>, in §4.2</span>
     <li><a href="#dom-fragmentresultoptions-blocksize">dict-member for FragmentResultOptions</a><span>, in §6.2</span>
    </ul>
   <li><a href="#dom-fragmentresult-block-size-slot">[[block size]]</a><span>, in §6.2</span>
   <li><a href="#dom-layoutedges-blockstart">blockStart</a><span>, in §4.6</span>
   <li>
    [[box]]
    <ul>
     <li><a href="#dom-fragmentresult-box-slot">attribute for FragmentResult</a><span>, in §6.2</span>
     <li><a href="#dom-layoutchild-box-slot">attribute for LayoutChild</a><span>, in §4.1</span>
    </ul>
   <li>
    breakToken
    <ul>
     <li><a href="#dom-layoutfragment-breaktoken">attribute for LayoutFragment</a><span>, in §4.2</span>
     <li><a href="#dom-fragmentresultoptions-breaktoken">dict-member for FragmentResultOptions</a><span>, in §6.2</span>
    </ul>
   <li><a href="#breaktoken">BreakToken</a><span>, in §4.5</span>
   <li><a href="#dictdef-breaktokenoptions">BreakTokenOptions</a><span>, in §4.5</span>
   <li><a href="#enumdef-breaktype">BreakType</a><span>, in §4.5</span>
   <li><a href="#dom-childbreaktoken-breaktype">breakType</a><span>, in §4.5</span>
   <li><a href="#dom-childbreaktoken-child">child</a><span>, in §4.5</span>
   <li><a href="#childbreaktoken">ChildBreakToken</a><span>, in §4.5</span>
   <li><a href="#layout-api-work-task-child-break-token">child break token</a><span>, in §6.1</span>
   <li>
    childBreakTokens
    <ul>
     <li><a href="#dom-breaktoken-childbreaktokens">attribute for BreakToken</a><span>, in §4.5</span>
     <li><a href="#dom-breaktokenoptions-childbreaktokens">dict-member for BreakTokenOptions</a><span>, in §4.5</span>
    </ul>
   <li><a href="#dom-layoutoptions-childdisplay">childDisplay</a><span>, in §3.2</span>
   <li><a href="#enumdef-childdisplaytype">ChildDisplayType</a><span>, in §3.2</span>
   <li><a href="#dom-fragmentresult-child-fragments-slot">[[child fragments]]</a><span>, in §6.2</span>
   <li><a href="#dom-fragmentresultoptions-childfragments">childFragments</a><span>, in §6.2</span>
   <li>
    child input properties
    <ul>
     <li><a href="#document-layout-definition-child-input-properties">dfn for document layout definition</a><span>, in §3.1</span>
     <li><a href="#layout-definition-child-input-properties">dfn for layout definition</a><span>, in §3.1</span>
    </ul>
   <li><a href="#child-layout">child layout</a><span>, in §3.3</span>
   <li><a href="#layout-definition-class-constructor">class constructor</a><span>, in §3.1</span>
   <li>
    "column"
    <ul>
     <li><a href="#dom-blockfragmentationtype-column">enum-value for BlockFragmentationType</a><span>, in §4.4</span>
     <li><a href="#dom-breaktype-column">enum-value for BreakType</a><span>, in §4.5</span>
    </ul>
   <li><a href="#construct-a-fragment-result">construct a fragment result</a><span>, in §6.2</span>
   <li><a href="#layout-definition-constructor-valid-flag">constructor valid flag</a><span>, in §3.1</span>
   <li><a href="#create-a-layout-api-context">create a layout API context</a><span>, in §6.1</span>
   <li><a href="#create-a-layout-constraints-object">create a layout constraints object</a><span>, in §4.4</span>
   <li><a href="#current-layout">current layout</a><span>, in §3.3</span>
   <li><a href="#dom-fragmentresult-data-slot">[[data]]</a><span>, in §6.2</span>
   <li>
    data
    <ul>
     <li><a href="#dom-breaktoken-data">attribute for BreakToken</a><span>, in §4.5</span>
     <li><a href="#dom-layoutconstraints-data">attribute for LayoutConstraints</a><span>, in §4.4</span>
     <li><a href="#dom-layoutfragment-data">attribute for LayoutFragment</a><span>, in §4.2</span>
     <li><a href="#dom-breaktokenoptions-data">dict-member for BreakTokenOptions</a><span>, in §4.5</span>
     <li><a href="#dom-fragmentresultoptions-data">dict-member for FragmentResultOptions</a><span>, in §6.2</span>
     <li><a href="#dom-layoutconstraintsoptions-data">dict-member for LayoutConstraintsOptions</a><span>, in §4.4.1</span>
    </ul>
   <li><a href="#determine-the-intrinsic-sizes">determine the intrinsic sizes</a><span>, in §6.2.1</span>
   <li><a href="#document-layout-definition">document layout definition</a><span>, in §3.1</span>
   <li><a href="#document-layout-definitions">document layout definitions</a><span>, in §3.2</span>
   <li>
    fixedBlockSize
    <ul>
     <li><a href="#dom-layoutconstraints-fixedblocksize">attribute for LayoutConstraints</a><span>, in §4.4</span>
     <li><a href="#dom-layoutconstraintsoptions-fixedblocksize">dict-member for LayoutConstraintsOptions</a><span>, in §4.4.1</span>
    </ul>
   <li>
    fixedInlineSize
    <ul>
     <li><a href="#dom-layoutconstraints-fixedinlinesize">attribute for LayoutConstraints</a><span>, in §4.4</span>
     <li><a href="#dom-layoutconstraintsoptions-fixedinlinesize">dict-member for LayoutConstraintsOptions</a><span>, in §4.4.1</span>
    </ul>
   <li><a href="#fragmentresult">FragmentResult</a><span>, in §6.2</span>
   <li><a href="#dom-fragmentresult-fragmentresult">FragmentResult()</a><span>, in §6.2</span>
   <li><a href="#dom-fragmentresult-fragmentresult">FragmentResult(options)</a><span>, in §6.2</span>
   <li><a href="#dictdef-fragmentresultoptions">FragmentResultOptions</a><span>, in §6.2</span>
   <li><a href="#generate-a-fragment">generate a fragment</a><span>, in §6.2.2</span>
   <li><a href="#get-a-document-layout-definition">get a document layout definition</a><span>, in §6.2.4</span>
   <li><a href="#get-a-layout-child">get a layout child</a><span>, in §4.1.1</span>
   <li><a href="#get-a-layout-class-instance">get a layout class instance</a><span>, in §6.2.4</span>
   <li><a href="#get-a-layout-definition">get a layout definition</a><span>, in §6.2.4</span>
   <li><a href="#get-a-style-map">get a style map</a><span>, in §6.2.4</span>
   <li><a href="#dom-layoutedges-inline">inline</a><span>, in §4.6</span>
   <li><a href="#dom-layoutedges-inlineend">inlineEnd</a><span>, in §4.6</span>
   <li><a href="#dom-layoutfragment-inlineoffset">inlineOffset</a><span>, in §4.2</span>
   <li><a href="#dom-fragmentresult-inline-size-slot">[[inline size]]</a><span>, in §6.2</span>
   <li>
    inlineSize
    <ul>
     <li><a href="#dom-fragmentresult-inlinesize">attribute for FragmentResult</a><span>, in §6.2</span>
     <li><a href="#dom-layoutfragment-inlinesize">attribute for LayoutFragment</a><span>, in §4.2</span>
     <li><a href="#dom-fragmentresultoptions-inlinesize">dict-member for FragmentResultOptions</a><span>, in §6.2</span>
    </ul>
   <li><a href="#dom-layoutedges-inlinestart">inlineStart</a><span>, in §4.6</span>
   <li>
    input properties
    <ul>
     <li><a href="#document-layout-definition-input-properties">dfn for document layout definition</a><span>, in §3.1</span>
     <li><a href="#layout-definition-input-properties">dfn for layout definition</a><span>, in §3.1</span>
    </ul>
   <li><a href="#dom-fragmentresult-internal-break-token-slot">[[internal break token]]</a><span>, in §6.2</span>
   <li><a href="#dom-layoutchild-intrinsicsizes">intrinsicSizes()</a><span>, in §4.1</span>
   <li><a href="#intrinsicsizes">IntrinsicSizes</a><span>, in §4.3</span>
   <li><a href="#layout-definition-intrinsic-sizes-function">intrinsic sizes function</a><span>, in §3.1</span>
   <li><a href="#dictdef-intrinsicsizesresultoptions">IntrinsicSizesResultOptions</a><span>, in §6.2</span>
   <li><a href="#invoke-a-layout-callback">invoke a layout callback</a><span>, in §6.2.2</span>
   <li><a href="#invoke-an-intrinsic-sizes-callback">invoke an intrinsic sizes callback</a><span>, in §6.2.1</span>
   <li><a href="#valdef-display-layout">layout()</a><span>, in §2</span>
   <li><a href="#layout-api-container">layout API container</a><span>, in §2</span>
   <li><a href="#layout-api-context">layout API context</a><span>, in §6.1</span>
   <li><a href="#layout-api-formatting-context">layout API formatting context</a><span>, in §2</span>
   <li><a href="#layout-api-work-task">layout API work task</a><span>, in §6.1</span>
   <li><a href="#layout-api-work-task-layout-child">layout child</a><span>, in §6.1</span>
   <li><a href="#layoutchild">LayoutChild</a><span>, in §4.1</span>
   <li><a href="#dom-box-layoutchildmap-slot">[[layoutChildMap]]</a><span>, in §4.1.1</span>
   <li><a href="#layout-class-instances">layout class instances</a><span>, in §3.2</span>
   <li><a href="#layout-api-work-task-layout-constraints">layout constraints</a><span>, in §6.1</span>
   <li><a href="#layoutconstraints">LayoutConstraints</a><span>, in §4.4</span>
   <li><a href="#dictdef-layoutconstraintsoptions">LayoutConstraintsOptions</a><span>, in §4.4.1</span>
   <li><a href="#layout-definition">layout definition</a><span>, in §3.1</span>
   <li><a href="#layout-definitions">layout definitions</a><span>, in §3.2</span>
   <li><a href="#layoutedges">LayoutEdges</a><span>, in §4.6</span>
   <li><a href="#layoutfragment">LayoutFragment</a><span>, in §4.2</span>
   <li><a href="#layout-definition-layout-function">layout function</a><span>, in §3.1</span>
   <li><a href="#dom-layoutchild-layoutnextfragment">layoutNextFragment(constraints, breakToken)</a><span>, in §4.1</span>
   <li>
    layout options
    <ul>
     <li><a href="#document-layout-definition-layout-options">dfn for document layout definition</a><span>, in §3.1</span>
     <li><a href="#layout-definition-layout-options">dfn for layout definition</a><span>, in §3.1</span>
    </ul>
   <li><a href="#dictdef-layoutoptions">LayoutOptions</a><span>, in §3.2</span>
   <li><a href="#enumdef-layoutsizingmode">LayoutSizingMode</a><span>, in §3.2</span>
   <li><a href="#dom-css-layoutworklet">layoutWorklet</a><span>, in §3</span>
   <li><a href="#layoutworkletglobalscope">LayoutWorkletGlobalScope</a><span>, in §3</span>
   <li><a href="#dom-breaktype-line">"line"</a><span>, in §4.5</span>
   <li><a href="#dom-layoutsizingmode-manual">"manual"</a><span>, in §3.2</span>
   <li>
    maxContentSize
    <ul>
     <li><a href="#dom-intrinsicsizes-maxcontentsize">attribute for IntrinsicSizes</a><span>, in §4.3</span>
     <li><a href="#dom-intrinsicsizesresultoptions-maxcontentsize">dict-member for IntrinsicSizesResultOptions</a><span>, in §6.2</span>
    </ul>
   <li>
    minContentSize
    <ul>
     <li><a href="#dom-intrinsicsizes-mincontentsize">attribute for IntrinsicSizes</a><span>, in §4.3</span>
     <li><a href="#dom-intrinsicsizesresultoptions-mincontentsize">dict-member for IntrinsicSizesResultOptions</a><span>, in §6.2</span>
    </ul>
   <li><a href="#layout-api-context-mode">mode</a><span>, in §6.1</span>
   <li>
    "none"
    <ul>
     <li><a href="#dom-blockfragmentationtype-none">enum-value for BlockFragmentationType</a><span>, in §4.4</span>
     <li><a href="#dom-breaktype-none">enum-value for BreakType</a><span>, in §4.5</span>
    </ul>
   <li><a href="#dom-childdisplaytype-normal">"normal"</a><span>, in §3.2</span>
   <li>
    "page"
    <ul>
     <li><a href="#dom-blockfragmentationtype-page">enum-value for BlockFragmentationType</a><span>, in §4.4</span>
     <li><a href="#dom-breaktype-page">enum-value for BreakType</a><span>, in §4.5</span>
    </ul>
   <li><a href="#parent-layout">parent layout</a><span>, in §3.3</span>
   <li>
    percentageBlockSize
    <ul>
     <li><a href="#dom-layoutconstraints-percentageblocksize">attribute for LayoutConstraints</a><span>, in §4.4</span>
     <li><a href="#dom-layoutconstraintsoptions-percentageblocksize">dict-member for LayoutConstraintsOptions</a><span>, in §4.4.1</span>
    </ul>
   <li>
    percentageInlineSize
    <ul>
     <li><a href="#dom-layoutconstraints-percentageinlinesize">attribute for LayoutConstraints</a><span>, in §4.4</span>
     <li><a href="#dom-layoutconstraintsoptions-percentageinlinesize">dict-member for LayoutConstraintsOptions</a><span>, in §4.4.1</span>
    </ul>
   <li><a href="#layout-api-work-task-promise">promise</a><span>, in §6.1</span>
   <li>
    "region"
    <ul>
     <li><a href="#dom-blockfragmentationtype-region">enum-value for BlockFragmentationType</a><span>, in §4.4</span>
     <li><a href="#dom-breaktype-region">enum-value for BreakType</a><span>, in §4.5</span>
    </ul>
   <li><a href="#dom-layoutworkletglobalscope-registerlayout">registerLayout(name, layoutCtor)</a><span>, in §3.2</span>
   <li><a href="#run-a-work-queue">run a work queue</a><span>, in §6.2.4</span>
   <li><a href="#dom-layoutoptions-sizing">sizing</a><span>, in §3.2</span>
   <li><a href="#dom-layoutchild-stylemap-slot">[[styleMap]]</a><span>, in §4.1</span>
   <li>
    styleMap
    <ul>
     <li><a href="#dom-layoutchild-stylemap">attribute for LayoutChild</a><span>, in §4.1</span>
     <li><a href="#stylemap">definition of</a><span>, in §3.2</span>
    </ul>
   <li><a href="#layout-api-work-task-task-type">task type</a><span>, in §6.1</span>
   <li><a href="#translate-a-layoutconstraintsoptions-to-internal-constraints">translate a LayoutConstraintsOptions to internal constraints</a><span>, in §4.4.1</span>
   <li>
    [[unique id]]
    <ul>
     <li><a href="#dom-childbreaktoken-unique-id-slot">attribute for ChildBreakToken</a><span>, in §4.5</span>
     <li><a href="#dom-fragmentresult-unique-id-slot">attribute for FragmentResult</a><span>, in §6.2</span>
     <li><a href="#dom-layoutchild-unique-id-slot">attribute for LayoutChild</a><span>, in §4.1</span>
     <li><a href="#dom-layoutfragment-unique-id-slot">attribute for LayoutFragment</a><span>, in §4.2</span>
    </ul>
   <li><a href="#layout-api-context-unique-id">unique id</a><span>, in §6.1</span>
   <li><a href="#update-a-layout-child-style">update a layout child style</a><span>, in §4.1.1</span>
   <li><a href="#layout-api-context-work-queue">work queue</a><span>, in §6.1</span>
  </ul>
  <aside class="dfn-panel" data-for="term-for-propdef-margin">
   <a href="https://drafts.csswg.org/css-box-3/#propdef-margin">https://drafts.csswg.org/css-box-3/#propdef-margin</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-margin">2. Layout API Containers</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-break-inside">
   <a href="https://drafts.csswg.org/css-break-3/#propdef-break-inside">https://drafts.csswg.org/css-break-3/#propdef-break-inside</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-break-inside">4.4. Layout Constraints</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-fragment">
   <a href="https://drafts.csswg.org/css-break-3/#fragment">https://drafts.csswg.org/css-break-3/#fragment</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-fragment">1. Introduction</a>
    <li><a href="#ref-for-fragment①">4.2. Layout Fragments</a> <a href="#ref-for-fragment②">(2)</a>
    <li><a href="#ref-for-fragment③">5.4. Fragmentation</a>
    <li><a href="#ref-for-fragment④">6.2.2. Generating Fragments</a> <a href="#ref-for-fragment⑤">(2)</a> <a href="#ref-for-fragment⑥">(3)</a> <a href="#ref-for-fragment⑦">(4)</a>
    <li><a href="#ref-for-fragment⑧">6.2.4. Utility Algorithms</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-fragmentation-break">
   <a href="https://drafts.csswg.org/css-break-4/#fragmentation-break">https://drafts.csswg.org/css-break-4/#fragmentation-break</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-fragmentation-break">6.2. Performing Layout</a>
    <li><a href="#ref-for-fragmentation-break①">6.2.2. Generating Fragments</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-computed-value">
   <a href="https://drafts.csswg.org/css-cascade-4/#computed-value">https://drafts.csswg.org/css-cascade-4/#computed-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-computed-value">2. Layout API Containers</a>
    <li><a href="#ref-for-computed-value①">2.2. Box Tree Transformations</a>
    <li><a href="#ref-for-computed-value②">3.2. Registering A Layout</a>
    <li><a href="#ref-for-computed-value③">4.1. Layout Children</a> <a href="#ref-for-computed-value④">(2)</a>
    <li><a href="#ref-for-computed-value⑤">4.1.1. LayoutChildren and the Box Tree</a> <a href="#ref-for-computed-value⑥">(2)</a>
    <li><a href="#ref-for-computed-value⑦">6.2.1. Determining Intrinsic Sizes</a> <a href="#ref-for-computed-value⑧">(2)</a>
    <li><a href="#ref-for-computed-value⑨">6.2.2. Generating Fragments</a> <a href="#ref-for-computed-value①⓪">(2)</a>
    <li><a href="#ref-for-computed-value①①">6.2.4. Utility Algorithms</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-flex-container">
   <a href="https://drafts.csswg.org/css-flexbox-1/#flex-container">https://drafts.csswg.org/css-flexbox-1/#flex-container</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-flex-container">2.2. Box Tree Transformations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-grid-container">
   <a href="https://drafts.csswg.org/css-grid-1/#grid-container">https://drafts.csswg.org/css-grid-1/#grid-container</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-grid-container">2.2. Box Tree Transformations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-root-inline-box">
   <a href="https://drafts.csswg.org/css-inline-3/#root-inline-box">https://drafts.csswg.org/css-inline-3/#root-inline-box</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-root-inline-box">2.2. Box Tree Transformations</a> <a href="#ref-for-root-inline-box①">(2)</a>
    <li><a href="#ref-for-root-inline-box②">4.1. Layout Children</a> <a href="#ref-for-root-inline-box③">(2)</a> <a href="#ref-for-root-inline-box④">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-overflow">
   <a href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow">https://drafts.csswg.org/css-overflow-3/#propdef-overflow</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-overflow">2. Layout API Containers</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-scrollable-overflow">
   <a href="https://drafts.csswg.org/css-overflow-3/#scrollable-overflow">https://drafts.csswg.org/css-overflow-3/#scrollable-overflow</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-scrollable-overflow">5.3. Overflow</a> <a href="#ref-for-scrollable-overflow①">(2)</a> <a href="#ref-for-scrollable-overflow②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-float">
   <a href="https://drafts.csswg.org/css-page-floats-3/#float">https://drafts.csswg.org/css-page-floats-3/#float</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-float">2.2. Box Tree Transformations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-z-index-auto">
   <a href="https://drafts.csswg.org/css-position-3/#valdef-z-index-auto">https://drafts.csswg.org/css-position-3/#valdef-z-index-auto</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-z-index-auto">2.1. Layout API Container Painting</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-position">
   <a href="https://drafts.csswg.org/css-position-3/#propdef-position">https://drafts.csswg.org/css-position-3/#propdef-position</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-position">2.1. Layout API Container Painting</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-relative-position">
   <a href="https://drafts.csswg.org/css-position-3/#relative-position">https://drafts.csswg.org/css-position-3/#relative-position</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-relative-position">4.2. Layout Fragments</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-position-static">
   <a href="https://drafts.csswg.org/css-position-3/#valdef-position-static">https://drafts.csswg.org/css-position-3/#valdef-position-static</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-position-static">2.1. Layout API Container Painting</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-z-index">
   <a href="https://drafts.csswg.org/css-position-3/#propdef-z-index">https://drafts.csswg.org/css-position-3/#propdef-z-index</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-z-index">2.1. Layout API Container Painting</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-selectordef-after">
   <a href="https://drafts.csswg.org/css-pseudo-4/#selectordef-after">https://drafts.csswg.org/css-pseudo-4/#selectordef-after</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-selectordef-after">4.1. Layout Children</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-selectordef-before">
   <a href="https://drafts.csswg.org/css-pseudo-4/#selectordef-before">https://drafts.csswg.org/css-pseudo-4/#selectordef-before</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-selectordef-before">4.1. Layout Children</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-selectordef-first-letter">
   <a href="https://drafts.csswg.org/css-pseudo-4/#selectordef-first-letter">https://drafts.csswg.org/css-pseudo-4/#selectordef-first-letter</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-selectordef-first-letter">4.1. Layout Children</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-selectordef-first-line">
   <a href="https://drafts.csswg.org/css-pseudo-4/#selectordef-first-line">https://drafts.csswg.org/css-pseudo-4/#selectordef-first-line</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-selectordef-first-line">4.1. Layout Children</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-shape-inside-display">
   <a href="https://drafts.csswg.org/css-shapes-2/#valdef-shape-inside-display">https://drafts.csswg.org/css-shapes-2/#valdef-shape-inside-display</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-shape-inside-display">2. Layout API Containers</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-width-auto">
   <a href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto">https://drafts.csswg.org/css-sizing-3/#valdef-width-auto</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-width-auto">4.4. Layout Constraints</a>
    <li><a href="#ref-for-valdef-width-auto①">5.1. Sizing</a> <a href="#ref-for-valdef-width-auto②">(2)</a> <a href="#ref-for-valdef-width-auto③">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-available">
   <a href="https://drafts.csswg.org/css-sizing-3/#available">https://drafts.csswg.org/css-sizing-3/#available</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-available">4.4. Layout Constraints</a> <a href="#ref-for-available①">(2)</a> <a href="#ref-for-available②">(3)</a>
    <li><a href="#ref-for-available③">4.4.1. Constraints for Layout Children</a> <a href="#ref-for-available④">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dfn-intrinsic-sizes">
   <a href="https://drafts.csswg.org/css-sizing-3/#dfn-intrinsic-sizes">https://drafts.csswg.org/css-sizing-3/#dfn-intrinsic-sizes</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dfn-intrinsic-sizes">6.2.1. Determining Intrinsic Sizes</a> <a href="#ref-for-dfn-intrinsic-sizes①">(2)</a> <a href="#ref-for-dfn-intrinsic-sizes②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-max-content">
   <a href="https://drafts.csswg.org/css-sizing-3/#max-content">https://drafts.csswg.org/css-sizing-3/#max-content</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-max-content">4.3. Intrinsic Sizes</a>
    <li><a href="#ref-for-max-content①">6.2.1. Determining Intrinsic Sizes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-min-content">
   <a href="https://drafts.csswg.org/css-sizing-3/#min-content">https://drafts.csswg.org/css-sizing-3/#min-content</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-min-content">4.3. Intrinsic Sizes</a>
    <li><a href="#ref-for-min-content①">6.2.1. Determining Intrinsic Sizes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-stretch-fit-inline-size">
   <a href="https://drafts.csswg.org/css-sizing-3/#stretch-fit-inline-size">https://drafts.csswg.org/css-sizing-3/#stretch-fit-inline-size</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-stretch-fit-inline-size">5.1. Sizing</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-stylepropertymapreadonly">
   <a href="https://drafts.css-houdini.org/css-typed-om-1/#stylepropertymapreadonly">https://drafts.css-houdini.org/css-typed-om-1/#stylepropertymapreadonly</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-stylepropertymapreadonly">3.2. Registering A Layout</a> <a href="#ref-for-stylepropertymapreadonly①">(2)</a>
    <li><a href="#ref-for-stylepropertymapreadonly②">4.1. Layout Children</a> <a href="#ref-for-stylepropertymapreadonly③">(2)</a> <a href="#ref-for-stylepropertymapreadonly④">(3)</a> <a href="#ref-for-stylepropertymapreadonly⑤">(4)</a> <a href="#ref-for-stylepropertymapreadonly⑥">(5)</a>
    <li><a href="#ref-for-stylepropertymapreadonly⑦">4.1.1. LayoutChildren and the Box Tree</a>
    <li><a href="#ref-for-stylepropertymapreadonly⑧">6.2.4. Utility Algorithms</a> <a href="#ref-for-stylepropertymapreadonly⑨">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-ident">
   <a href="https://drafts.csswg.org/css-values-4/#typedef-ident">https://drafts.csswg.org/css-values-4/#typedef-ident</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-ident">2. Layout API Containers</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-custom-property">
   <a href="https://drafts.csswg.org/css-variables-1/#custom-property">https://drafts.csswg.org/css-variables-1/#custom-property</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-custom-property">3.2. Registering A Layout</a> <a href="#ref-for-custom-property①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-abstract-dimensions">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#abstract-dimensions">https://drafts.csswg.org/css-writing-modes-4/#abstract-dimensions</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-abstract-dimensions">4.6. Edges</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-block-size">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#block-size">https://drafts.csswg.org/css-writing-modes-4/#block-size</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-block-size">4.4. Layout Constraints</a> <a href="#ref-for-block-size①">(2)</a> <a href="#ref-for-block-size②">(3)</a>
    <li><a href="#ref-for-block-size③">5.1. Sizing</a>
    <li><a href="#ref-for-block-size④">6.2. Performing Layout</a>
    <li><a href="#ref-for-block-size⑤">6.2.2. Generating Fragments</a>
    <li><a href="#ref-for-block-size⑥">6.2.4. Utility Algorithms</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-block-start">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#block-start">https://drafts.csswg.org/css-writing-modes-4/#block-start</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-block-start">5.2. Positioning</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-inline-size">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#inline-size">https://drafts.csswg.org/css-writing-modes-4/#inline-size</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-inline-size">4.4. Layout Constraints</a>
    <li><a href="#ref-for-inline-size①">5.1. Sizing</a>
    <li><a href="#ref-for-inline-size②">6.2. Performing Layout</a>
    <li><a href="#ref-for-inline-size③">6.2.2. Generating Fragments</a>
    <li><a href="#ref-for-inline-size④">6.2.4. Utility Algorithms</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-inline-start">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#inline-start">https://drafts.csswg.org/css-writing-modes-4/#inline-start</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-inline-start">5.2. Positioning</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-display-inside">
   <a href="https://drafts.csswg.org/css-display-3/#typedef-display-inside">https://drafts.csswg.org/css-display-3/#typedef-display-inside</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-display-inside">2. Layout API Containers</a> <a href="#ref-for-typedef-display-inside①">(2)</a>
    <li><a href="#ref-for-typedef-display-inside②">6.2.1. Determining Intrinsic Sizes</a>
    <li><a href="#ref-for-typedef-display-inside③">6.2.2. Generating Fragments</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-display-outside">
   <a href="https://drafts.csswg.org/css-display-3/#typedef-display-outside">https://drafts.csswg.org/css-display-3/#typedef-display-outside</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-display-outside">2.2. Box Tree Transformations</a> <a href="#ref-for-typedef-display-outside①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-anonymous">
   <a href="https://drafts.csswg.org/css-display-3/#anonymous">https://drafts.csswg.org/css-display-3/#anonymous</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-anonymous">4.1. Layout Children</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-atomic-inline">
   <a href="https://drafts.csswg.org/css-display-3/#atomic-inline">https://drafts.csswg.org/css-display-3/#atomic-inline</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-atomic-inline">2.2. Box Tree Transformations</a> <a href="#ref-for-atomic-inline①">(2)</a>
    <li><a href="#ref-for-atomic-inline②">4.1. Layout Children</a> <a href="#ref-for-atomic-inline③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-block-box">
   <a href="https://drafts.csswg.org/css-display-3/#block-box">https://drafts.csswg.org/css-display-3/#block-box</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-block-box">5.1. Sizing</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-block-formatting-context">
   <a href="https://drafts.csswg.org/css-display-3/#block-formatting-context">https://drafts.csswg.org/css-display-3/#block-formatting-context</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-block-formatting-context">5.1. Sizing</a> <a href="#ref-for-block-formatting-context①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-block-level">
   <a href="https://drafts.csswg.org/css-display-3/#block-level">https://drafts.csswg.org/css-display-3/#block-level</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-block-level">2.2. Box Tree Transformations</a> <a href="#ref-for-block-level①">(2)</a>
    <li><a href="#ref-for-block-level②">5.1. Sizing</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-blockify">
   <a href="https://drafts.csswg.org/css-display-3/#blockify">https://drafts.csswg.org/css-display-3/#blockify</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-blockify">2.2. Box Tree Transformations</a> <a href="#ref-for-blockify①">(2)</a>
    <li><a href="#ref-for-blockify②">4.1. Layout Children</a> <a href="#ref-for-blockify③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-blockify">
   <a href="https://drafts.csswg.org/css-display-3/#blockify">https://drafts.csswg.org/css-display-3/#blockify</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-blockify">2.2. Box Tree Transformations</a> <a href="#ref-for-blockify①">(2)</a>
    <li><a href="#ref-for-blockify②">4.1. Layout Children</a> <a href="#ref-for-blockify③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-box">
   <a href="https://drafts.csswg.org/css-display-3/#box">https://drafts.csswg.org/css-display-3/#box</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-box">1. Introduction</a>
    <li><a href="#ref-for-box①">3.2. Registering A Layout</a> <a href="#ref-for-box②">(2)</a> <a href="#ref-for-box③">(3)</a> <a href="#ref-for-box④">(4)</a> <a href="#ref-for-box⑤">(5)</a> <a href="#ref-for-box⑥">(6)</a>
    <li><a href="#ref-for-box⑦">3.3. Terminology</a> <a href="#ref-for-box⑧">(2)</a>
    <li><a href="#ref-for-box⑨">4.1. Layout Children</a> <a href="#ref-for-box①⓪">(2)</a>
    <li><a href="#ref-for-box①①">4.1.1. LayoutChildren and the Box Tree</a> <a href="#ref-for-box①②">(2)</a> <a href="#ref-for-box①③">(3)</a> <a href="#ref-for-box①④">(4)</a>
    <li><a href="#ref-for-box①⑤">4.3. Intrinsic Sizes</a>
    <li><a href="#ref-for-box①⑥">4.6. Edges</a>
    <li><a href="#ref-for-box①⑦">6.1. Processing Model</a>
    <li><a href="#ref-for-box①⑧">6.2. Performing Layout</a> <a href="#ref-for-box①⑨">(2)</a>
    <li><a href="#ref-for-box②⓪">6.2.1. Determining Intrinsic Sizes</a>
    <li><a href="#ref-for-box②①">6.2.2. Generating Fragments</a>
    <li><a href="#ref-for-box②②">6.2.4. Utility Algorithms</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-box tree">
   <a href="https://drafts.csswg.org/css-display-3/#box tree">https://drafts.csswg.org/css-display-3/#box tree</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-box%20tree">1. Introduction</a> <a href="#ref-for-box%20tree①">(2)</a>
    <li><a href="#ref-for-box%20tree②">3.2. Registering A Layout</a>
    <li><a href="#ref-for-box%20tree③">4.1.1. LayoutChildren and the Box Tree</a> <a href="#ref-for-box%20tree④">(2)</a> <a href="#ref-for-box%20tree⑤">(3)</a> <a href="#ref-for-box%20tree⑥">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-containing-block">
   <a href="https://drafts.csswg.org/css-display-3/#containing-block">https://drafts.csswg.org/css-display-3/#containing-block</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-containing-block">4.1.1. LayoutChildren and the Box Tree</a> <a href="#ref-for-containing-block①">(2)</a> <a href="#ref-for-containing-block②">(3)</a>
    <li><a href="#ref-for-containing-block③">5.2. Positioning</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-display">
   <a href="https://drafts.csswg.org/css-display-3/#propdef-display">https://drafts.csswg.org/css-display-3/#propdef-display</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-display">2.2. Box Tree Transformations</a>
    <li><a href="#ref-for-propdef-display①">4.1. Layout Children</a> <a href="#ref-for-propdef-display②">(2)</a> <a href="#ref-for-propdef-display③">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-flow-layout">
   <a href="https://drafts.csswg.org/css-display-3/#flow-layout">https://drafts.csswg.org/css-display-3/#flow-layout</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-flow-layout">6.2. Performing Layout</a>
    <li><a href="#ref-for-flow-layout①">6.2.1. Determining Intrinsic Sizes</a> <a href="#ref-for-flow-layout②">(2)</a> <a href="#ref-for-flow-layout③">(3)</a> <a href="#ref-for-flow-layout④">(4)</a> <a href="#ref-for-flow-layout⑤">(5)</a> <a href="#ref-for-flow-layout⑥">(6)</a>
    <li><a href="#ref-for-flow-layout⑦">6.2.2. Generating Fragments</a> <a href="#ref-for-flow-layout⑧">(2)</a> <a href="#ref-for-flow-layout⑨">(3)</a> <a href="#ref-for-flow-layout①⓪">(4)</a> <a href="#ref-for-flow-layout①①">(5)</a> <a href="#ref-for-flow-layout①②">(6)</a> <a href="#ref-for-flow-layout①③">(7)</a> <a href="#ref-for-flow-layout①④">(8)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-display-inline">
   <a href="https://drafts.csswg.org/css-display-3/#valdef-display-inline">https://drafts.csswg.org/css-display-3/#valdef-display-inline</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-display-inline">2.2. Box Tree Transformations</a> <a href="#ref-for-valdef-display-inline①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-inline-formatting-context">
   <a href="https://drafts.csswg.org/css-display-3/#inline-formatting-context">https://drafts.csswg.org/css-display-3/#inline-formatting-context</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-inline-formatting-context">5.1. Sizing</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-inline-level">
   <a href="https://drafts.csswg.org/css-display-3/#inline-level">https://drafts.csswg.org/css-display-3/#inline-level</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-inline-level">2.2. Box Tree Transformations</a> <a href="#ref-for-inline-level①">(2)</a>
    <li><a href="#ref-for-inline-level②">4.5. Breaking and Fragmentation</a>
    <li><a href="#ref-for-inline-level③">5.1. Sizing</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-inlinify">
   <a href="https://drafts.csswg.org/css-display-3/#inlinify">https://drafts.csswg.org/css-display-3/#inlinify</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-inlinify">2.2. Box Tree Transformations</a> <a href="#ref-for-inlinify①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-display-none">
   <a href="https://drafts.csswg.org/css-display-3/#valdef-display-none">https://drafts.csswg.org/css-display-3/#valdef-display-none</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-display-none">4.1. Layout Children</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-replaced-element">
   <a href="https://drafts.csswg.org/css-display-3/#replaced-element">https://drafts.csswg.org/css-display-3/#replaced-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-replaced-element">4.4. Layout Constraints</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-namespacedef-css">
   <a href="https://drafts.csswg.org/cssom-1/#namespacedef-css">https://drafts.csswg.org/cssom-1/#namespacedef-css</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-namespacedef-css">3. Layout Worklet</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-supported-css-property">
   <a href="https://drafts.csswg.org/cssom-1/#supported-css-property">https://drafts.csswg.org/cssom-1/#supported-css-property</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-supported-css-property">3.2. Registering A Layout</a> <a href="#ref-for-supported-css-property①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-document">
   <a href="https://dom.spec.whatwg.org/#concept-document">https://dom.spec.whatwg.org/#concept-document</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-document">3.1. Concepts</a>
    <li><a href="#ref-for-concept-document①">3.2. Registering A Layout</a> <a href="#ref-for-concept-document②">(2)</a>
    <li><a href="#ref-for-concept-document③">6.2.4. Utility Algorithms</a> <a href="#ref-for-concept-document④">(2)</a> <a href="#ref-for-concept-document⑤">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-element">
   <a href="https://dom.spec.whatwg.org/#concept-element">https://dom.spec.whatwg.org/#concept-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-element">4.1. Layout Children</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-in-parallel">
   <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#in-parallel">https://html.spec.whatwg.org/multipage/infrastructure.html#in-parallel</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-in-parallel">6.2.1. Determining Intrinsic Sizes</a> <a href="#ref-for-in-parallel①">(2)</a>
    <li><a href="#ref-for-in-parallel②">6.2.2. Generating Fragments</a> <a href="#ref-for-in-parallel③">(2)</a>
    <li><a href="#ref-for-in-parallel④">6.2.4. Utility Algorithms</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-perform-a-microtask-checkpoint">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#perform-a-microtask-checkpoint">https://html.spec.whatwg.org/multipage/webappapis.html#perform-a-microtask-checkpoint</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-perform-a-microtask-checkpoint">6.2.4. Utility Algorithms</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-queue-a-task">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task">https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-queue-a-task">3.2. Registering A Layout</a>
    <li><a href="#ref-for-queue-a-task①">6.2.4. Utility Algorithms</a> <a href="#ref-for-queue-a-task②">(2)</a> <a href="#ref-for-queue-a-task③">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-global-object-realm">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-global-object-realm">https://html.spec.whatwg.org/multipage/webappapis.html#concept-global-object-realm</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-global-object-realm">6.2.4. Utility Algorithms</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-list-append">
   <a href="https://infra.spec.whatwg.org/#list-append">https://infra.spec.whatwg.org/#list-append</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-list-append">4.1. Layout Children</a> <a href="#ref-for-list-append①">(2)</a>
    <li><a href="#ref-for-list-append②">6.2.1. Determining Intrinsic Sizes</a>
    <li><a href="#ref-for-list-append③">6.2.2. Generating Fragments</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-javascript-string-convert">
   <a href="https://infra.spec.whatwg.org/#javascript-string-convert">https://infra.spec.whatwg.org/#javascript-string-convert</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-javascript-string-convert">3.2. Registering A Layout</a> <a href="#ref-for-javascript-string-convert①">(2)</a> <a href="#ref-for-javascript-string-convert②">(3)</a> <a href="#ref-for-javascript-string-convert③">(4)</a> <a href="#ref-for-javascript-string-convert④">(5)</a>
    <li><a href="#ref-for-javascript-string-convert⑤">6.2.1. Determining Intrinsic Sizes</a>
    <li><a href="#ref-for-javascript-string-convert⑥">6.2.2. Generating Fragments</a> <a href="#ref-for-javascript-string-convert⑦">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-list-empty">
   <a href="https://infra.spec.whatwg.org/#list-empty">https://infra.spec.whatwg.org/#list-empty</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-list-empty">6.1. Processing Model</a>
    <li><a href="#ref-for-list-empty①">6.2.4. Utility Algorithms</a> <a href="#ref-for-list-empty②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-map-exists">
   <a href="https://infra.spec.whatwg.org/#map-exists">https://infra.spec.whatwg.org/#map-exists</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-map-exists">3.2. Registering A Layout</a> <a href="#ref-for-map-exists①">(2)</a>
    <li><a href="#ref-for-map-exists②">4.1.1. LayoutChildren and the Box Tree</a>
    <li><a href="#ref-for-map-exists③">6.2.4. Utility Algorithms</a> <a href="#ref-for-map-exists④">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-map-iterate">
   <a href="https://infra.spec.whatwg.org/#map-iterate">https://infra.spec.whatwg.org/#map-iterate</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-map-iterate">4.1.1. LayoutChildren and the Box Tree</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-map-get">
   <a href="https://infra.spec.whatwg.org/#map-get">https://infra.spec.whatwg.org/#map-get</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-map-get">3.2. Registering A Layout</a>
    <li><a href="#ref-for-map-get①">4.1.1. LayoutChildren and the Box Tree</a>
    <li><a href="#ref-for-map-get②">6.2.4. Utility Algorithms</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-list">
   <a href="https://infra.spec.whatwg.org/#list">https://infra.spec.whatwg.org/#list</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-list">3.1. Concepts</a> <a href="#ref-for-list①">(2)</a> <a href="#ref-for-list②">(3)</a> <a href="#ref-for-list③">(4)</a>
    <li><a href="#ref-for-list④">6.1. Processing Model</a> <a href="#ref-for-list⑤">(2)</a>
    <li><a href="#ref-for-list⑥">6.2.1. Determining Intrinsic Sizes</a>
    <li><a href="#ref-for-list⑦">6.2.2. Generating Fragments</a>
    <li><a href="#ref-for-list⑧">6.2.3. Global Scope Selection</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-ordered-map">
   <a href="https://infra.spec.whatwg.org/#ordered-map">https://infra.spec.whatwg.org/#ordered-map</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-ordered-map">3.2. Registering A Layout</a> <a href="#ref-for-ordered-map①">(2)</a> <a href="#ref-for-ordered-map②">(3)</a> <a href="#ref-for-ordered-map③">(4)</a>
    <li><a href="#ref-for-ordered-map④">4.1.1. LayoutChildren and the Box Tree</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-map-set">
   <a href="https://infra.spec.whatwg.org/#map-set">https://infra.spec.whatwg.org/#map-set</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-map-set">3.2. Registering A Layout</a> <a href="#ref-for-map-set①">(2)</a> <a href="#ref-for-map-set②">(3)</a>
    <li><a href="#ref-for-map-set③">4.1.1. LayoutChildren and the Box Tree</a>
    <li><a href="#ref-for-map-set④">6.2.4. Utility Algorithms</a> <a href="#ref-for-map-set⑤">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-struct">
   <a href="https://infra.spec.whatwg.org/#struct">https://infra.spec.whatwg.org/#struct</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-struct">3.1. Concepts</a> <a href="#ref-for-struct①">(2)</a>
    <li><a href="#ref-for-struct②">6.1. Processing Model</a> <a href="#ref-for-struct③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-iteration-while">
   <a href="https://infra.spec.whatwg.org/#iteration-while">https://infra.spec.whatwg.org/#iteration-while</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-iteration-while">6.2.4. Utility Algorithms</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-DOMException">
   <a href="https://heycam.github.io/webidl/#idl-DOMException">https://heycam.github.io/webidl/#idl-DOMException</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-DOMException">3.2. Registering A Layout</a>
    <li><a href="#ref-for-idl-DOMException①">4.1. Layout Children</a> <a href="#ref-for-idl-DOMException②">(2)</a> <a href="#ref-for-idl-DOMException③">(3)</a> <a href="#ref-for-idl-DOMException④">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-DOMString">
   <a href="https://heycam.github.io/webidl/#idl-DOMString">https://heycam.github.io/webidl/#idl-DOMString</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-DOMString">3. Layout Worklet</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-Exposed">
   <a href="https://heycam.github.io/webidl/#Exposed">https://heycam.github.io/webidl/#Exposed</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-Exposed">3. Layout Worklet</a>
    <li><a href="#ref-for-Exposed①">3.2. Registering A Layout</a> <a href="#ref-for-Exposed②">(2)</a> <a href="#ref-for-Exposed③">(3)</a>
    <li><a href="#ref-for-Exposed④">4.1. Layout Children</a>
    <li><a href="#ref-for-Exposed⑤">4.2. Layout Fragments</a>
    <li><a href="#ref-for-Exposed⑥">4.3. Intrinsic Sizes</a>
    <li><a href="#ref-for-Exposed⑦">4.4. Layout Constraints</a>
    <li><a href="#ref-for-Exposed⑧">4.5. Breaking and Fragmentation</a> <a href="#ref-for-Exposed⑨">(2)</a>
    <li><a href="#ref-for-Exposed①⓪">4.6. Edges</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-Global">
   <a href="https://heycam.github.io/webidl/#Global">https://heycam.github.io/webidl/#Global</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-Global">3. Layout Worklet</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-invalidmodificationerror">
   <a href="https://heycam.github.io/webidl/#invalidmodificationerror">https://heycam.github.io/webidl/#invalidmodificationerror</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-invalidmodificationerror">3.2. Registering A Layout</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-invalidstateerror">
   <a href="https://heycam.github.io/webidl/#invalidstateerror">https://heycam.github.io/webidl/#invalidstateerror</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-invalidstateerror">4.1. Layout Children</a> <a href="#ref-for-invalidstateerror①">(2)</a> <a href="#ref-for-invalidstateerror②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-notsupportederror">
   <a href="https://heycam.github.io/webidl/#notsupportederror">https://heycam.github.io/webidl/#notsupportederror</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-notsupportederror">4.1. Layout Children</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-SameObject">
   <a href="https://heycam.github.io/webidl/#SameObject">https://heycam.github.io/webidl/#SameObject</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-SameObject">3. Layout Worklet</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-VoidFunction">
   <a href="https://heycam.github.io/webidl/#VoidFunction">https://heycam.github.io/webidl/#VoidFunction</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-VoidFunction">3. Layout Worklet</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dfn-callback-function">
   <a href="https://heycam.github.io/webidl/#dfn-callback-function">https://heycam.github.io/webidl/#dfn-callback-function</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dfn-callback-function">3.2. Registering A Layout</a> <a href="#ref-for-dfn-callback-function①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-double">
   <a href="https://heycam.github.io/webidl/#idl-double">https://heycam.github.io/webidl/#idl-double</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-double">4.2. Layout Fragments</a> <a href="#ref-for-idl-double①">(2)</a> <a href="#ref-for-idl-double②">(3)</a> <a href="#ref-for-idl-double③">(4)</a>
    <li><a href="#ref-for-idl-double④">4.3. Intrinsic Sizes</a> <a href="#ref-for-idl-double⑤">(2)</a>
    <li><a href="#ref-for-idl-double⑥">4.4. Layout Constraints</a> <a href="#ref-for-idl-double⑦">(2)</a> <a href="#ref-for-idl-double⑧">(3)</a> <a href="#ref-for-idl-double⑨">(4)</a> <a href="#ref-for-idl-double①⓪">(5)</a> <a href="#ref-for-idl-double①①">(6)</a> <a href="#ref-for-idl-double①②">(7)</a>
    <li><a href="#ref-for-idl-double①③">4.4.1. Constraints for Layout Children</a> <a href="#ref-for-idl-double①④">(2)</a> <a href="#ref-for-idl-double①⑤">(3)</a> <a href="#ref-for-idl-double①⑥">(4)</a> <a href="#ref-for-idl-double①⑦">(5)</a> <a href="#ref-for-idl-double①⑧">(6)</a> <a href="#ref-for-idl-double①⑨">(7)</a>
    <li><a href="#ref-for-idl-double②⓪">4.6. Edges</a> <a href="#ref-for-idl-double②①">(2)</a> <a href="#ref-for-idl-double②②">(3)</a> <a href="#ref-for-idl-double②③">(4)</a> <a href="#ref-for-idl-double②④">(5)</a> <a href="#ref-for-idl-double②⑤">(6)</a>
    <li><a href="#ref-for-idl-double②⑥">6.2. Performing Layout</a> <a href="#ref-for-idl-double②⑦">(2)</a> <a href="#ref-for-idl-double②⑧">(3)</a> <a href="#ref-for-idl-double②⑨">(4)</a> <a href="#ref-for-idl-double③⓪">(5)</a> <a href="#ref-for-idl-double③①">(6)</a> <a href="#ref-for-idl-double③②">(7)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-invoke-a-callback-function">
   <a href="https://heycam.github.io/webidl/#invoke-a-callback-function">https://heycam.github.io/webidl/#invoke-a-callback-function</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-invoke-a-callback-function">6.2.1. Determining Intrinsic Sizes</a>
    <li><a href="#ref-for-invoke-a-callback-function①">6.2.2. Generating Fragments</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dfn-platform-object">
   <a href="https://heycam.github.io/webidl/#dfn-platform-object">https://heycam.github.io/webidl/#dfn-platform-object</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dfn-platform-object">6.2.2. Generating Fragments</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dfn-throw">
   <a href="https://heycam.github.io/webidl/#dfn-throw">https://heycam.github.io/webidl/#dfn-throw</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dfn-throw">3.2. Registering A Layout</a> <a href="#ref-for-dfn-throw①">(2)</a> <a href="#ref-for-dfn-throw②">(3)</a> <a href="#ref-for-dfn-throw③">(4)</a> <a href="#ref-for-dfn-throw④">(5)</a> <a href="#ref-for-dfn-throw⑤">(6)</a>
    <li><a href="#ref-for-dfn-throw⑥">6.2. Performing Layout</a> <a href="#ref-for-dfn-throw⑦">(2)</a>
    <li><a href="#ref-for-dfn-throw⑧">6.2.1. Determining Intrinsic Sizes</a> <a href="#ref-for-dfn-throw⑨">(2)</a>
    <li><a href="#ref-for-dfn-throw①⓪">6.2.2. Generating Fragments</a> <a href="#ref-for-dfn-throw①①">(2)</a> <a href="#ref-for-dfn-throw①②">(3)</a> <a href="#ref-for-dfn-throw①③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-worklet">
   <a href="https://drafts.css-houdini.org/worklets/#worklet">https://drafts.css-houdini.org/worklets/#worklet</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-worklet">3. Layout Worklet</a> <a href="#ref-for-worklet①">(2)</a> <a href="#ref-for-worklet②">(3)</a>
    <li><a href="#ref-for-worklet③">6.2.1. Determining Intrinsic Sizes</a> <a href="#ref-for-worklet④">(2)</a>
    <li><a href="#ref-for-worklet⑤">6.2.2. Generating Fragments</a> <a href="#ref-for-worklet⑥">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-workletglobalscope">
   <a href="https://drafts.css-houdini.org/worklets/#workletglobalscope">https://drafts.css-houdini.org/worklets/#workletglobalscope</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-workletglobalscope">3. Layout Worklet</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-create-a-workletglobalscope">
   <a href="https://drafts.css-houdini.org/worklets/#create-a-workletglobalscope">https://drafts.css-houdini.org/worklets/#create-a-workletglobalscope</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-create-a-workletglobalscope">6.2.1. Determining Intrinsic Sizes</a>
    <li><a href="#ref-for-create-a-workletglobalscope①">6.2.2. Generating Fragments</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-worklet-global-scope-type">
   <a href="https://drafts.css-houdini.org/worklets/#worklet-global-scope-type">https://drafts.css-houdini.org/worklets/#worklet-global-scope-type</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-worklet-global-scope-type">3. Layout Worklet</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-worklets-workletglobalscopes">
   <a href="https://drafts.css-houdini.org/worklets/#worklets-workletglobalscopes">https://drafts.css-houdini.org/worklets/#worklets-workletglobalscopes</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-worklets-workletglobalscopes">6.2.1. Determining Intrinsic Sizes</a>
    <li><a href="#ref-for-worklets-workletglobalscopes①">6.2.2. Generating Fragments</a>
    <li><a href="#ref-for-worklets-workletglobalscopes②">6.2.3. Global Scope Selection</a>
   </ul>
  </aside>
  <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
  <ul class="index">
   <li>
    <a data-link-type="biblio">[css-box-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-margin" style="color:initial">margin</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-break-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-break-inside" style="color:initial">break-inside</span>
     <li><span class="dfn-paneled" id="term-for-fragment" style="color:initial">fragment</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-break-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-fragmentation-break" style="color:initial">fragmentation break</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-cascade-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-computed-value" style="color:initial">computed value</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-flexbox-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-flex-container" style="color:initial">flex container</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-grid-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-grid-container" style="color:initial">grid container</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-inline-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-root-inline-box" style="color:initial">root inline box</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-overflow-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-overflow" style="color:initial">overflow</span>
     <li><span class="dfn-paneled" id="term-for-scrollable-overflow" style="color:initial">scrollable overflow</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-page-floats-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-float" style="color:initial">float</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-position-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-valdef-z-index-auto" style="color:initial">auto</span>
     <li><span class="dfn-paneled" id="term-for-propdef-position" style="color:initial">position</span>
     <li><span class="dfn-paneled" id="term-for-relative-position" style="color:initial">relatively position</span>
     <li><span class="dfn-paneled" id="term-for-valdef-position-static" style="color:initial">static</span>
     <li><span class="dfn-paneled" id="term-for-propdef-z-index" style="color:initial">z-index</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-pseudo-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-selectordef-after" style="color:initial">::after</span>
     <li><span class="dfn-paneled" id="term-for-selectordef-before" style="color:initial">::before</span>
     <li><span class="dfn-paneled" id="term-for-selectordef-first-letter" style="color:initial">::first-letter</span>
     <li><span class="dfn-paneled" id="term-for-selectordef-first-line" style="color:initial">::first-line</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-shapes-2]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-valdef-shape-inside-display" style="color:initial">display</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-sizing-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-valdef-width-auto" style="color:initial">auto</span>
     <li><span class="dfn-paneled" id="term-for-available" style="color:initial">available space</span>
     <li><span class="dfn-paneled" id="term-for-dfn-intrinsic-sizes" style="color:initial">intrinsic sizes</span>
     <li><span class="dfn-paneled" id="term-for-max-content" style="color:initial">max-content size</span>
     <li><span class="dfn-paneled" id="term-for-min-content" style="color:initial">min-content size</span>
     <li><span class="dfn-paneled" id="term-for-stretch-fit-inline-size" style="color:initial">stretch-fit inline size</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-typed-om-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-stylepropertymapreadonly" style="color:initial">StylePropertyMapReadOnly</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-values-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-typedef-ident" style="color:initial">&lt;ident></span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-variables-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-custom-property" style="color:initial">custom property</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-writing-modes-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-abstract-dimensions" style="color:initial">abstract dimensions</span>
     <li><span class="dfn-paneled" id="term-for-block-size" style="color:initial">block size</span>
     <li><span class="dfn-paneled" id="term-for-block-start" style="color:initial">block-start</span>
     <li><span class="dfn-paneled" id="term-for-inline-size" style="color:initial">inline size</span>
     <li><span class="dfn-paneled" id="term-for-inline-start" style="color:initial">inline-start</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css3-display]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-typedef-display-inside" style="color:initial">&lt;display-inside></span>
     <li><span class="dfn-paneled" id="term-for-typedef-display-outside" style="color:initial">&lt;display-outside></span>
     <li><span class="dfn-paneled" id="term-for-anonymous" style="color:initial">anonymous box</span>
     <li><span class="dfn-paneled" id="term-for-atomic-inline" style="color:initial">atomic inline</span>
     <li><span class="dfn-paneled" id="term-for-block-box" style="color:initial">block box</span>
     <li><span class="dfn-paneled" id="term-for-block-formatting-context" style="color:initial">block formatting context</span>
     <li><span class="dfn-paneled" id="term-for-block-level" style="color:initial">block-level</span>
     <li><span class="dfn-paneled" id="term-for-blockify" style="color:initial">blockification</span>
     <li><span class="dfn-paneled" id="term-for-blockify①" style="color:initial">blockify</span>
     <li><span class="dfn-paneled" id="term-for-box" style="color:initial">box</span>
     <li><span class="dfn-paneled" id="term-for-box tree" style="color:initial">box tree</span>
     <li><span class="dfn-paneled" id="term-for-containing-block" style="color:initial">containing block</span>
     <li><span class="dfn-paneled" id="term-for-propdef-display" style="color:initial">display</span>
     <li><span class="dfn-paneled" id="term-for-flow-layout" style="color:initial">flow layout</span>
     <li><span class="dfn-paneled" id="term-for-valdef-display-inline" style="color:initial">inline</span>
     <li><span class="dfn-paneled" id="term-for-inline-formatting-context" style="color:initial">inline formatting context</span>
     <li><span class="dfn-paneled" id="term-for-inline-level" style="color:initial">inline-level</span>
     <li><span class="dfn-paneled" id="term-for-inlinify" style="color:initial">inlinify</span>
     <li><span class="dfn-paneled" id="term-for-valdef-display-none" style="color:initial">none</span>
     <li><span class="dfn-paneled" id="term-for-replaced-element" style="color:initial">replaced element</span>
    </ul>
   <li>
    <a data-link-type="biblio">[cssom-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-namespacedef-css" style="color:initial">CSS</span>
     <li><span class="dfn-paneled" id="term-for-supported-css-property" style="color:initial">supported css property</span>
    </ul>
   <li>
    <a data-link-type="biblio">[DOM]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-concept-document" style="color:initial">document</span>
     <li><span class="dfn-paneled" id="term-for-concept-element" style="color:initial">element</span>
    </ul>
   <li>
    <a data-link-type="biblio">[HTML]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-in-parallel" style="color:initial">in parallel</span>
     <li><span class="dfn-paneled" id="term-for-perform-a-microtask-checkpoint" style="color:initial">perform a microtask checkpoint</span>
     <li><span class="dfn-paneled" id="term-for-queue-a-task" style="color:initial">queue a task</span>
     <li><span class="dfn-paneled" id="term-for-concept-global-object-realm" style="color:initial">realm</span>
    </ul>
   <li>
    <a data-link-type="biblio">[INFRA]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-list-append" style="color:initial">append</span>
     <li><span class="dfn-paneled" id="term-for-javascript-string-convert" style="color:initial">convert</span>
     <li><span class="dfn-paneled" id="term-for-list-empty" style="color:initial">empty</span>
     <li><span class="dfn-paneled" id="term-for-map-exists" style="color:initial">exist</span>
     <li><span class="dfn-paneled" id="term-for-map-iterate" style="color:initial">for each <small>(for map)</small></span>
     <li><span class="dfn-paneled" id="term-for-map-get" style="color:initial">get</span>
     <li><span class="dfn-paneled" id="term-for-list" style="color:initial">list</span>
     <li><span class="dfn-paneled" id="term-for-ordered-map" style="color:initial">map</span>
     <li><span class="dfn-paneled" id="term-for-map-set" style="color:initial">set</span>
     <li><span class="dfn-paneled" id="term-for-struct" style="color:initial">struct</span>
     <li><span class="dfn-paneled" id="term-for-iteration-while" style="color:initial">while</span>
    </ul>
   <li>
    <a data-link-type="biblio">[WebIDL]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-idl-DOMException" style="color:initial">DOMException</span>
     <li><span class="dfn-paneled" id="term-for-idl-DOMString" style="color:initial">DOMString</span>
     <li><span class="dfn-paneled" id="term-for-Exposed" style="color:initial">Exposed</span>
     <li><span class="dfn-paneled" id="term-for-Global" style="color:initial">Global</span>
     <li><span class="dfn-paneled" id="term-for-invalidmodificationerror" style="color:initial">InvalidModificationError</span>
     <li><span class="dfn-paneled" id="term-for-invalidstateerror" style="color:initial">InvalidStateError</span>
     <li><span class="dfn-paneled" id="term-for-notsupportederror" style="color:initial">NotSupportedError</span>
     <li><span class="dfn-paneled" id="term-for-SameObject" style="color:initial">SameObject</span>
     <li><span class="dfn-paneled" id="term-for-VoidFunction" style="color:initial">VoidFunction</span>
     <li><span class="dfn-paneled" id="term-for-dfn-callback-function" style="color:initial">callback function</span>
     <li><span class="dfn-paneled" id="term-for-idl-double" style="color:initial">double</span>
     <li><span class="dfn-paneled" id="term-for-invoke-a-callback-function" style="color:initial">invoke</span>
     <li><span class="dfn-paneled" id="term-for-dfn-platform-object" style="color:initial">platform object</span>
     <li><span class="dfn-paneled" id="term-for-dfn-throw" style="color:initial">throw</span>
    </ul>
   <li>
    <a data-link-type="biblio">[worklets-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-worklet" style="color:initial">Worklet</span>
     <li><span class="dfn-paneled" id="term-for-workletglobalscope" style="color:initial">WorkletGlobalScope</span>
     <li><span class="dfn-paneled" id="term-for-create-a-workletglobalscope" style="color:initial">create a workletglobalscope</span>
     <li><span class="dfn-paneled" id="term-for-worklet-global-scope-type" style="color:initial">worklet global scope type</span>
     <li><span class="dfn-paneled" id="term-for-worklets-workletglobalscopes" style="color:initial">worklet's workletglobalscopes</span>
    </ul>
  </ul>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
  <dl>
   <dt id="biblio-css-box-3">[CSS-BOX-3]
   <dd>Elika Etemad. <a href="https://www.w3.org/TR/css-box-3/">CSS Box Model Module Level 3</a>. 18 December 2018. WD. URL: <a href="https://www.w3.org/TR/css-box-3/">https://www.w3.org/TR/css-box-3/</a>
   <dt id="biblio-css-break-3">[CSS-BREAK-3]
   <dd>Rossen Atanassov; Elika Etemad. <a href="https://www.w3.org/TR/css-break-3/">CSS Fragmentation Module Level 3</a>. 4 December 2018. CR. URL: <a href="https://www.w3.org/TR/css-break-3/">https://www.w3.org/TR/css-break-3/</a>
   <dt id="biblio-css-break-4">[CSS-BREAK-4]
   <dd>Rossen Atanassov; Elika Etemad. <a href="https://www.w3.org/TR/css-break-4/">CSS Fragmentation Module Level 4</a>. 18 December 2018. WD. URL: <a href="https://www.w3.org/TR/css-break-4/">https://www.w3.org/TR/css-break-4/</a>
   <dt id="biblio-css-cascade-4">[CSS-CASCADE-4]
   <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-cascade-4/">CSS Cascading and Inheritance Level 4</a>. 28 August 2018. CR. URL: <a href="https://www.w3.org/TR/css-cascade-4/">https://www.w3.org/TR/css-cascade-4/</a>
   <dt id="biblio-css-flexbox-1">[CSS-FLEXBOX-1]
   <dd>Tab Atkins Jr.; et al. <a href="https://www.w3.org/TR/css-flexbox-1/">CSS Flexible Box Layout Module Level 1</a>. 19 November 2018. CR. URL: <a href="https://www.w3.org/TR/css-flexbox-1/">https://www.w3.org/TR/css-flexbox-1/</a>
   <dt id="biblio-css-grid-1">[CSS-GRID-1]
   <dd>Tab Atkins Jr.; Elika Etemad; Rossen Atanassov. <a href="https://www.w3.org/TR/css-grid-1/">CSS Grid Layout Module Level 1</a>. 14 December 2017. CR. URL: <a href="https://www.w3.org/TR/css-grid-1/">https://www.w3.org/TR/css-grid-1/</a>
   <dt id="biblio-css-inline-3">[CSS-INLINE-3]
   <dd>Dave Cramer; Elika Etemad; Steve Zilles. <a href="https://www.w3.org/TR/css-inline-3/">CSS Inline Layout Module Level 3</a>. 8 August 2018. WD. URL: <a href="https://www.w3.org/TR/css-inline-3/">https://www.w3.org/TR/css-inline-3/</a>
   <dt id="biblio-css-overflow-3">[CSS-OVERFLOW-3]
   <dd>David Baron; Elika Etemad; Florian Rivoal. <a href="https://www.w3.org/TR/css-overflow-3/">CSS Overflow Module Level 3</a>. 31 July 2018. WD. URL: <a href="https://www.w3.org/TR/css-overflow-3/">https://www.w3.org/TR/css-overflow-3/</a>
   <dt id="biblio-css-page-floats-3">[CSS-PAGE-FLOATS-3]
   <dd>Johannes Wilm. <a href="https://www.w3.org/TR/css-page-floats-3/">CSS Page Floats</a>. 15 September 2015. WD. URL: <a href="https://www.w3.org/TR/css-page-floats-3/">https://www.w3.org/TR/css-page-floats-3/</a>
   <dt id="biblio-css-position-3">[CSS-POSITION-3]
   <dd>Rossen Atanassov; Arron Eicholz. <a href="https://www.w3.org/TR/css-position-3/">CSS Positioned Layout Module Level 3</a>. 17 May 2016. WD. URL: <a href="https://www.w3.org/TR/css-position-3/">https://www.w3.org/TR/css-position-3/</a>
   <dt id="biblio-css-pseudo-4">[CSS-PSEUDO-4]
   <dd>Daniel Glazman; Elika Etemad; Alan Stearns. <a href="https://www.w3.org/TR/css-pseudo-4/">CSS Pseudo-Elements Module Level 4</a>. 25 February 2019. WD. URL: <a href="https://www.w3.org/TR/css-pseudo-4/">https://www.w3.org/TR/css-pseudo-4/</a>
   <dt id="biblio-css-sizing-3">[CSS-SIZING-3]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-sizing-3/">CSS Intrinsic &amp; Extrinsic Sizing Module Level 3</a>. 22 May 2019. WD. URL: <a href="https://www.w3.org/TR/css-sizing-3/">https://www.w3.org/TR/css-sizing-3/</a>
   <dt id="biblio-css-typed-om-1">[CSS-TYPED-OM-1]
   <dd>Shane Stephens; Tab Atkins Jr.; Naina Raisinghani. <a href="https://www.w3.org/TR/css-typed-om-1/">CSS Typed OM Level 1</a>. 10 April 2018. WD. URL: <a href="https://www.w3.org/TR/css-typed-om-1/">https://www.w3.org/TR/css-typed-om-1/</a>
   <dt id="biblio-css-values-4">[CSS-VALUES-4]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-4/">CSS Values and Units Module Level 4</a>. 31 January 2019. WD. URL: <a href="https://www.w3.org/TR/css-values-4/">https://www.w3.org/TR/css-values-4/</a>
   <dt id="biblio-css-variables-1">[CSS-VARIABLES-1]
   <dd>Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-variables-1/">CSS Custom Properties for Cascading Variables Module Level 1</a>. 3 December 2015. CR. URL: <a href="https://www.w3.org/TR/css-variables-1/">https://www.w3.org/TR/css-variables-1/</a>
   <dt id="biblio-css-writing-modes-4">[CSS-WRITING-MODES-4]
   <dd>Elika Etemad; Koji Ishii. <a href="https://www.w3.org/TR/css-writing-modes-4/">CSS Writing Modes Level 4</a>. 24 May 2018. CR. URL: <a href="https://www.w3.org/TR/css-writing-modes-4/">https://www.w3.org/TR/css-writing-modes-4/</a>
   <dt id="biblio-css21">[CSS21]
   <dd>Bert Bos; et al. <a href="https://www.w3.org/TR/CSS2/">Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. REC. URL: <a href="https://www.w3.org/TR/CSS2/">https://www.w3.org/TR/CSS2/</a>
   <dt id="biblio-css3-display">[CSS3-DISPLAY]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-display-3/">CSS Display Module Level 3</a>. 28 August 2018. CR. URL: <a href="https://www.w3.org/TR/css-display-3/">https://www.w3.org/TR/css-display-3/</a>
   <dt id="biblio-cssom-1">[CSSOM-1]
   <dd>Simon Pieters; Glenn Adams. <a href="https://www.w3.org/TR/cssom-1/">CSS Object Model (CSSOM)</a>. 17 March 2016. WD. URL: <a href="https://www.w3.org/TR/cssom-1/">https://www.w3.org/TR/cssom-1/</a>
   <dt id="biblio-dom">[DOM]
   <dd>Anne van Kesteren. <a href="https://dom.spec.whatwg.org/">DOM Standard</a>. Living Standard. URL: <a href="https://dom.spec.whatwg.org/">https://dom.spec.whatwg.org/</a>
   <dt id="biblio-html">[HTML]
   <dd>Anne van Kesteren; et al. <a href="https://html.spec.whatwg.org/multipage/">HTML Standard</a>. Living Standard. URL: <a href="https://html.spec.whatwg.org/multipage/">https://html.spec.whatwg.org/multipage/</a>
   <dt id="biblio-infra">[INFRA]
   <dd>Anne van Kesteren; Domenic Denicola. <a href="https://infra.spec.whatwg.org/">Infra Standard</a>. Living Standard. URL: <a href="https://infra.spec.whatwg.org/">https://infra.spec.whatwg.org/</a>
   <dt id="biblio-rfc2119">[RFC2119]
   <dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a>
   <dt id="biblio-webidl">[WebIDL]
   <dd>Boris Zbarsky. <a href="https://heycam.github.io/webidl/">Web IDL</a>. 15 December 2016. ED. URL: <a href="https://heycam.github.io/webidl/">https://heycam.github.io/webidl/</a>
   <dt id="biblio-worklets-1">[WORKLETS-1]
   <dd>Ian Kilpatrick. <a href="https://www.w3.org/TR/worklets-1/">Worklets Level 1</a>. 7 June 2016. WD. URL: <a href="https://www.w3.org/TR/worklets-1/">https://www.w3.org/TR/worklets-1/</a>
  </dl>
  <h3 class="no-num no-ref heading settled" id="informative"><span class="content">Informative References</span><a class="self-link" href="#informative"></a></h3>
  <dl>
   <dt id="biblio-css-multicol-1">[CSS-MULTICOL-1]
   <dd>Florian Rivoal; Rachel Andrew. <a href="https://www.w3.org/TR/css-multicol-1/">CSS Multi-column Layout Module Level 1</a>. 28 May 2018. WD. URL: <a href="https://www.w3.org/TR/css-multicol-1/">https://www.w3.org/TR/css-multicol-1/</a>
   <dt id="biblio-css-shapes-2">[CSS-SHAPES-2]
   <dd>CSS Shapes Module Level 2 URL: <a href="https://drafts.csswg.org/css-shapes-2/">https://drafts.csswg.org/css-shapes-2/</a>
  </dl>
  <h2 class="no-num no-ref heading settled" id="idl-index"><span class="content">IDL Index</span><a class="self-link" href="#idl-index"></a></h2>
<pre class="idl highlight def"><c- b>partial</c-> <c- b>namespace</c-> <a class="idl-code" data-link-type="namespace" href="https://drafts.csswg.org/cssom-1/#namespacedef-css" id="ref-for-namespacedef-css①"><c- g>CSS</c-></a> {
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SameObject" id="ref-for-SameObject①"><c- g>SameObject</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://drafts.css-houdini.org/worklets/#worklet" id="ref-for-worklet①①"><c- n>Worklet</c-></a> <a data-readonly data-type="Worklet" href="#dom-css-layoutworklet"><code><c- g>layoutWorklet</c-></code></a>;
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Global" id="ref-for-Global①"><c- g>Global</c-></a>=(<a class="n" data-link-type="idl-name" href="https://drafts.css-houdini.org/worklets/#worklet" id="ref-for-worklet②①"><c- n>Worklet</c-></a>,<a class="n" data-link-type="idl-name"><c- n>LayoutWorklet</c-></a>),<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed①①"><c- g>Exposed</c-></a>=<c- n>LayoutWorklet</c->]
<c- b>interface</c-> <a href="#layoutworkletglobalscope"><code><c- g>LayoutWorkletGlobalScope</c-></code></a> : <a class="n" data-link-type="idl-name" href="https://drafts.css-houdini.org/worklets/#workletglobalscope" id="ref-for-workletglobalscope①"><c- n>WorkletGlobalScope</c-></a> {
    <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-layoutworkletglobalscope-registerlayout" id="ref-for-dom-layoutworkletglobalscope-registerlayout⑦"><c- g>registerLayout</c-></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①"><c- b>DOMString</c-></a> <a href="#dom-layoutworkletglobalscope-registerlayout-name-layoutctor-name"><code><c- g>name</c-></code></a>, <a class="n" data-link-type="idl-name" href="https://heycam.github.io/webidl/#VoidFunction" id="ref-for-VoidFunction①"><c- n>VoidFunction</c-></a> <a href="#dom-layoutworkletglobalscope-registerlayout-name-layoutctor-layoutctor"><code><c- g>layoutCtor</c-></code></a>);
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed①②"><c- g>Exposed</c-></a>=<c- n>LayoutWorklet</c->]
<c- b>dictionary</c-> <a href="#dictdef-layoutoptions"><code><c- g>LayoutOptions</c-></code></a> {
  <a class="n" data-link-type="idl-name" href="#enumdef-childdisplaytype" id="ref-for-enumdef-childdisplaytype①"><c- n>ChildDisplayType</c-></a> <a data-default="&quot;block&quot;" data-type="ChildDisplayType " href="#dom-layoutoptions-childdisplay"><code><c- g>childDisplay</c-></code></a> = "block";
  <a class="n" data-link-type="idl-name" href="#enumdef-layoutsizingmode" id="ref-for-enumdef-layoutsizingmode①"><c- n>LayoutSizingMode</c-></a> <a data-default="&quot;block-like&quot;" data-type="LayoutSizingMode " href="#dom-layoutoptions-sizing"><code><c- g>sizing</c-></code></a> = "block-like";
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed②①"><c- g>Exposed</c-></a>=<c- n>LayoutWorklet</c->]
<c- b>enum</c-> <a href="#enumdef-childdisplaytype"><code><c- g>ChildDisplayType</c-></code></a> {
    <a href="#dom-childdisplaytype-block"><code><c- s>"block"</c-></code></a>, // default - "blockifies" the child boxes.
    <a href="#dom-childdisplaytype-normal"><code><c- s>"normal"</c-></code></a>,
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed③①"><c- g>Exposed</c-></a>=<c- n>LayoutWorklet</c->]
<c- b>enum</c-> <a href="#enumdef-layoutsizingmode"><code><c- g>LayoutSizingMode</c-></code></a> {
    <a href="#dom-layoutsizingmode-block-like"><code><c- s>"block-like"</c-></code></a>, // default - Sizing behaves like block containers.
    <a href="#dom-layoutsizingmode-manual"><code><c- s>"manual"</c-></code></a>, // Sizing is specified by the web developer.
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed④①"><c- g>Exposed</c-></a>=<c- n>LayoutWorklet</c->]
<c- b>interface</c-> <a href="#layoutchild"><code><c- g>LayoutChild</c-></code></a> {
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://drafts.css-houdini.org/css-typed-om-1/#stylepropertymapreadonly" id="ref-for-stylepropertymapreadonly②①"><c- n>StylePropertyMapReadOnly</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="StylePropertyMapReadOnly" href="#dom-layoutchild-stylemap" id="ref-for-dom-layoutchild-stylemap②"><c- g>styleMap</c-></a>;

    <c- b>Promise</c->&lt;<a class="n" data-link-type="idl-name" href="#intrinsicsizes" id="ref-for-intrinsicsizes③"><c- n>IntrinsicSizes</c-></a>> <a class="idl-code" data-link-type="method" href="#dom-layoutchild-intrinsicsizes" id="ref-for-dom-layoutchild-intrinsicsizes③"><c- g>intrinsicSizes</c-></a>();
    <c- b>Promise</c->&lt;<a class="n" data-link-type="idl-name" href="#layoutfragment" id="ref-for-layoutfragment②⑧"><c- n>LayoutFragment</c-></a>> <a class="idl-code" data-link-type="method" href="#dom-layoutchild-layoutnextfragment" id="ref-for-dom-layoutchild-layoutnextfragment①①"><c- g>layoutNextFragment</c-></a>(<a class="n" data-link-type="idl-name" href="#dictdef-layoutconstraintsoptions" id="ref-for-dictdef-layoutconstraintsoptions⑥"><c- n>LayoutConstraintsOptions</c-></a> <a href="#dom-layoutchild-layoutnextfragment-constraints-breaktoken-constraints"><code><c- g>constraints</c-></code></a>, <a class="n" data-link-type="idl-name" href="#childbreaktoken" id="ref-for-childbreaktoken⑨"><c- n>ChildBreakToken</c-></a> <a href="#dom-layoutchild-layoutnextfragment-constraints-breaktoken-breaktoken"><code><c- g>breakToken</c-></code></a>);
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed⑤①"><c- g>Exposed</c-></a>=<c- n>LayoutWorklet</c->]
<c- b>interface</c-> <a href="#layoutfragment"><code><c- g>LayoutFragment</c-></code></a> {
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double③③"><c- b>double</c-></a> <a data-readonly data-type="double" href="#dom-layoutfragment-inlinesize"><code><c- g>inlineSize</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①①⓪"><c- b>double</c-></a> <a data-readonly data-type="double" href="#dom-layoutfragment-blocksize"><code><c- g>blockSize</c-></code></a>;

    <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double②①⓪"><c- b>double</c-></a> <a data-type="double" href="#dom-layoutfragment-inlineoffset"><code><c- g>inlineOffset</c-></code></a>;
    <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double③④"><c- b>double</c-></a> <a data-type="double" href="#dom-layoutfragment-blockoffset"><code><c- g>blockOffset</c-></code></a>;

    <c- b>readonly</c-> <c- b>attribute</c-> <c- b>any</c-> <a data-readonly data-type="any" href="#dom-layoutfragment-data"><code><c- g>data</c-></code></a>;

    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#childbreaktoken" id="ref-for-childbreaktoken①①"><c- n>ChildBreakToken</c-></a>? <a data-readonly data-type="ChildBreakToken?" href="#dom-layoutfragment-breaktoken"><code><c- g>breakToken</c-></code></a>;
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed⑥①"><c- g>Exposed</c-></a>=<c- n>LayoutWorklet</c->]
<c- b>interface</c-> <a href="#intrinsicsizes"><code><c- g>IntrinsicSizes</c-></code></a> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double④①"><c- b>double</c-></a> <a data-readonly data-type="double" href="#dom-intrinsicsizes-mincontentsize"><code><c- g>minContentSize</c-></code></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double⑤①"><c- b>double</c-></a> <a data-readonly data-type="double" href="#dom-intrinsicsizes-maxcontentsize"><code><c- g>maxContentSize</c-></code></a>;
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed⑦①"><c- g>Exposed</c-></a>=<c- n>LayoutWorklet</c->]
<c- b>interface</c-> <a href="#layoutconstraints"><code><c- g>LayoutConstraints</c-></code></a> {
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double⑥①"><c- b>double</c-></a> <a data-readonly data-type="double" href="#dom-layoutconstraints-availableinlinesize"><code><c- g>availableInlineSize</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double⑦①"><c- b>double</c-></a> <a data-readonly data-type="double" href="#dom-layoutconstraints-availableblocksize"><code><c- g>availableBlockSize</c-></code></a>;

    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double⑧①"><c- b>double</c-></a>? <a data-readonly data-type="double?" href="#dom-layoutconstraints-fixedinlinesize"><code><c- g>fixedInlineSize</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double⑨①"><c- b>double</c-></a>? <a data-readonly data-type="double?" href="#dom-layoutconstraints-fixedblocksize"><code><c- g>fixedBlockSize</c-></code></a>;

    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①⓪①"><c- b>double</c-></a> <a data-readonly data-type="double" href="#dom-layoutconstraints-percentageinlinesize"><code><c- g>percentageInlineSize</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①①①"><c- b>double</c-></a> <a data-readonly data-type="double" href="#dom-layoutconstraints-percentageblocksize"><code><c- g>percentageBlockSize</c-></code></a>;

    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①②①"><c- b>double</c-></a>? <a data-readonly data-type="double?" href="#dom-layoutconstraints-blockfragmentationoffset"><code><c- g>blockFragmentationOffset</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#enumdef-blockfragmentationtype" id="ref-for-enumdef-blockfragmentationtype②"><c- n>BlockFragmentationType</c-></a> <a data-readonly data-type="BlockFragmentationType" href="#dom-layoutconstraints-blockfragmentationtype"><code><c- g>blockFragmentationType</c-></code></a>;

    <c- b>readonly</c-> <c- b>attribute</c-> <c- b>any</c-> <a data-readonly data-type="any" href="#dom-layoutconstraints-data"><code><c- g>data</c-></code></a>;
};

<c- b>enum</c-> <a href="#enumdef-blockfragmentationtype"><code><c- g>BlockFragmentationType</c-></code></a> { <a href="#dom-blockfragmentationtype-none"><code><c- s>"none"</c-></code></a>, <a href="#dom-blockfragmentationtype-page"><code><c- s>"page"</c-></code></a>, <a href="#dom-blockfragmentationtype-column"><code><c- s>"column"</c-></code></a>, <a href="#dom-blockfragmentationtype-region"><code><c- s>"region"</c-></code></a> };

<c- b>dictionary</c-> <a href="#dictdef-layoutconstraintsoptions"><code><c- g>LayoutConstraintsOptions</c-></code></a> {
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①③①"><c- b>double</c-></a> <a data-type="double " href="#dom-layoutconstraintsoptions-availableinlinesize"><code><c- g>availableInlineSize</c-></code></a>;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①④①"><c- b>double</c-></a> <a data-type="double " href="#dom-layoutconstraintsoptions-availableblocksize"><code><c- g>availableBlockSize</c-></code></a>;

    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①⑤①"><c- b>double</c-></a> <a data-type="double " href="#dom-layoutconstraintsoptions-fixedinlinesize"><code><c- g>fixedInlineSize</c-></code></a>;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①⑥①"><c- b>double</c-></a> <a data-type="double " href="#dom-layoutconstraintsoptions-fixedblocksize"><code><c- g>fixedBlockSize</c-></code></a>;

    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①⑦①"><c- b>double</c-></a> <a data-type="double " href="#dom-layoutconstraintsoptions-percentageinlinesize"><code><c- g>percentageInlineSize</c-></code></a>;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①⑧①"><c- b>double</c-></a> <a data-type="double " href="#dom-layoutconstraintsoptions-percentageblocksize"><code><c- g>percentageBlockSize</c-></code></a>;

    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①⑨①"><c- b>double</c-></a> <a data-type="double " href="#dom-layoutconstraintsoptions-blockfragmentationoffset"><code><c- g>blockFragmentationOffset</c-></code></a>;
    <a class="n" data-link-type="idl-name" href="#enumdef-blockfragmentationtype" id="ref-for-enumdef-blockfragmentationtype①①"><c- n>BlockFragmentationType</c-></a> <a data-default="&quot;none&quot;" data-type="BlockFragmentationType " href="#dom-layoutconstraintsoptions-blockfragmentationtype"><code><c- g>blockFragmentationType</c-></code></a> = "none";

    <c- b>any</c-> <a data-type="any " href="#dom-layoutconstraintsoptions-data"><code><c- g>data</c-></code></a>;
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed⑧①"><c- g>Exposed</c-></a>=<c- n>LayoutWorklet</c->]
<c- b>interface</c-> <a href="#childbreaktoken"><code><c- g>ChildBreakToken</c-></code></a> {
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#enumdef-breaktype" id="ref-for-enumdef-breaktype①"><c- n>BreakType</c-></a> <a data-readonly data-type="BreakType" href="#dom-childbreaktoken-breaktype"><code><c- g>breakType</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#layoutchild" id="ref-for-layoutchild③⑥①"><c- n>LayoutChild</c-></a> <a data-readonly data-type="LayoutChild" href="#dom-childbreaktoken-child"><code><c- g>child</c-></code></a>;
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed⑨①"><c- g>Exposed</c-></a>=<c- n>LayoutWorklet</c->]
<c- b>interface</c-> <a href="#breaktoken"><code><c- g>BreakToken</c-></code></a> {
    <c- b>readonly</c-> <c- b>attribute</c-> <c- b>FrozenArray</c->&lt;<a class="n" data-link-type="idl-name" href="#childbreaktoken" id="ref-for-childbreaktoken②①"><c- n>ChildBreakToken</c-></a>> <a data-readonly data-type="FrozenArray<ChildBreakToken>" href="#dom-breaktoken-childbreaktokens"><code><c- g>childBreakTokens</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <c- b>any</c-> <a data-readonly data-type="any" href="#dom-breaktoken-data"><code><c- g>data</c-></code></a>;
};

<c- b>dictionary</c-> <a href="#dictdef-breaktokenoptions"><code><c- g>BreakTokenOptions</c-></code></a> {
    <c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#childbreaktoken" id="ref-for-childbreaktoken③①"><c- n>ChildBreakToken</c-></a>> <a data-type="sequence<ChildBreakToken> " href="#dom-breaktokenoptions-childbreaktokens"><code><c- g>childBreakTokens</c-></code></a>;
    <c- b>any</c-> <a data-default="null" data-type="any " href="#dom-breaktokenoptions-data"><code><c- g>data</c-></code></a> = <c- b>null</c->;
};

<c- b>enum</c-> <a href="#enumdef-breaktype"><code><c- g>BreakType</c-></code></a> { <a href="#dom-breaktype-none"><code><c- s>"none"</c-></code></a>, <a href="#dom-breaktype-line"><code><c- s>"line"</c-></code></a>, <a href="#dom-breaktype-column"><code><c- s>"column"</c-></code></a>, <a href="#dom-breaktype-page"><code><c- s>"page"</c-></code></a>, <a href="#dom-breaktype-region"><code><c- s>"region"</c-></code></a> };

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed①⓪①"><c- g>Exposed</c-></a>=<c- n>LayoutWorklet</c->]
<c- b>interface</c-> <a href="#layoutedges"><code><c- g>LayoutEdges</c-></code></a> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double②⓪①"><c- b>double</c-></a> <a data-readonly data-type="double" href="#dom-layoutedges-inlinestart"><code><c- g>inlineStart</c-></code></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double②①①"><c- b>double</c-></a> <a data-readonly data-type="double" href="#dom-layoutedges-inlineend"><code><c- g>inlineEnd</c-></code></a>;

  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double②②①"><c- b>double</c-></a> <a data-readonly data-type="double" href="#dom-layoutedges-blockstart"><code><c- g>blockStart</c-></code></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double②③①"><c- b>double</c-></a> <a data-readonly data-type="double" href="#dom-layoutedges-blockend"><code><c- g>blockEnd</c-></code></a>;

  // Convenience attributes for the sum in one direction.
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double②④①"><c- b>double</c-></a> <a data-readonly data-type="double" href="#dom-layoutedges-inline"><code><c- g>inline</c-></code></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double②⑤①"><c- b>double</c-></a> <a data-readonly data-type="double" href="#dom-layoutedges-block"><code><c- g>block</c-></code></a>;
};

// This is the final return value from the author defined layout() method.
<c- b>dictionary</c-> <a href="#dictdef-fragmentresultoptions"><code><c- g>FragmentResultOptions</c-></code></a> {
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double②⑥①"><c- b>double</c-></a> <a data-default="0" data-type="double " href="#dom-fragmentresultoptions-inlinesize"><code><c- g>inlineSize</c-></code></a> = 0;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double②⑦①"><c- b>double</c-></a> <a data-default="0" data-type="double " href="#dom-fragmentresultoptions-blocksize"><code><c- g>blockSize</c-></code></a> = 0;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double②⑧①"><c- b>double</c-></a> <a data-default="0" data-type="double " href="#dom-fragmentresultoptions-autoblocksize"><code><c- g>autoBlockSize</c-></code></a> = 0;
    <c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#layoutfragment" id="ref-for-layoutfragment②⑤①"><c- n>LayoutFragment</c-></a>> <a data-default="[]" data-type="sequence<LayoutFragment> " href="#dom-fragmentresultoptions-childfragments"><code><c- g>childFragments</c-></code></a> = [];
    <c- b>any</c-> <a data-default="null" data-type="any " href="#dom-fragmentresultoptions-data"><code><c- g>data</c-></code></a> = <c- b>null</c->;
    <a class="n" data-link-type="idl-name" href="#dictdef-breaktokenoptions" id="ref-for-dictdef-breaktokenoptions①"><c- n>BreakTokenOptions</c-></a> <a data-default="null" data-type="BreakTokenOptions " href="#dom-fragmentresultoptions-breaktoken"><code><c- g>breakToken</c-></code></a> = <c- b>null</c->;
};

[<a class="idl-code" data-link-type="constructor" href="#dom-fragmentresult-fragmentresult" id="ref-for-dom-fragmentresult-fragmentresult①"><c- g>Constructor</c-></a>(<c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-fragmentresultoptions" id="ref-for-dictdef-fragmentresultoptions②①"><c- n>FragmentResultOptions</c-></a> <a href="#dom-fragmentresult-fragmentresult-options-options"><code><c- g>options</c-></code></a>)]
<c- b>interface</c-> <a href="#fragmentresult"><code><c- g>FragmentResult</c-></code></a> {
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double②⑨①"><c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="double" href="#dom-fragmentresult-inlinesize" id="ref-for-dom-fragmentresult-inlinesize①"><c- g>inlineSize</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double③⓪①"><c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="double" href="#dom-fragmentresult-blocksize" id="ref-for-dom-fragmentresult-blocksize①"><c- g>blockSize</c-></a>;
};

<c- b>dictionary</c-> <a href="#dictdef-intrinsicsizesresultoptions"><code><c- g>IntrinsicSizesResultOptions</c-></code></a> {
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double③①①"><c- b>double</c-></a> <a data-type="double " href="#dom-intrinsicsizesresultoptions-maxcontentsize"><code><c- g>maxContentSize</c-></code></a>;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double③②①"><c- b>double</c-></a> <a data-type="double " href="#dom-intrinsicsizesresultoptions-mincontentsize"><code><c- g>minContentSize</c-></code></a>;
};

</pre>
  <aside class="dfn-panel" data-for="valdef-display-layout">
   <b><a href="#valdef-display-layout">#valdef-display-layout</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-display-layout">2. Layout API Containers</a> <a href="#ref-for-valdef-display-layout①">(2)</a>
    <li><a href="#ref-for-valdef-display-layout②">3.1. Concepts</a> <a href="#ref-for-valdef-display-layout③">(2)</a>
    <li><a href="#ref-for-valdef-display-layout④">4.1.1. LayoutChildren and the Box Tree</a>
    <li><a href="#ref-for-valdef-display-layout⑤">6.2.1. Determining Intrinsic Sizes</a>
    <li><a href="#ref-for-valdef-display-layout⑥">6.2.2. Generating Fragments</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="layout-api-container">
   <b><a href="#layout-api-container">#layout-api-container</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-layout-api-container">2. Layout API Containers</a> <a href="#ref-for-layout-api-container①">(2)</a> <a href="#ref-for-layout-api-container②">(3)</a> <a href="#ref-for-layout-api-container③">(4)</a>
    <li><a href="#ref-for-layout-api-container④">2.1. Layout API Container Painting</a>
    <li><a href="#ref-for-layout-api-container⑤">2.2. Box Tree Transformations</a>
    <li><a href="#ref-for-layout-api-container⑥">3.2. Registering A Layout</a> <a href="#ref-for-layout-api-container⑦">(2)</a>
    <li><a href="#ref-for-layout-api-container⑧">4.1.1. LayoutChildren and the Box Tree</a> <a href="#ref-for-layout-api-container⑨">(2)</a>
    <li><a href="#ref-for-layout-api-container①⓪">4.2. Layout Fragments</a> <a href="#ref-for-layout-api-container①①">(2)</a>
    <li><a href="#ref-for-layout-api-container①②">4.4.1. Constraints for Layout Children</a>
    <li><a href="#ref-for-layout-api-container①③">5.1. Sizing</a> <a href="#ref-for-layout-api-container①④">(2)</a> <a href="#ref-for-layout-api-container①⑤">(3)</a> <a href="#ref-for-layout-api-container①⑥">(4)</a> <a href="#ref-for-layout-api-container①⑦">(5)</a>
    <li><a href="#ref-for-layout-api-container①⑧">5.1.1. Positioned layout sizing</a> <a href="#ref-for-layout-api-container①⑨">(2)</a>
    <li><a href="#ref-for-layout-api-container②⓪">5.2. Positioning</a> <a href="#ref-for-layout-api-container②①">(2)</a> <a href="#ref-for-layout-api-container②②">(3)</a>
    <li><a href="#ref-for-layout-api-container②③">5.3. Overflow</a> <a href="#ref-for-layout-api-container②④">(2)</a> <a href="#ref-for-layout-api-container②⑤">(3)</a>
    <li><a href="#ref-for-layout-api-container②⑥">5.5. Alignment</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="layout-api-formatting-context">
   <b><a href="#layout-api-formatting-context">#layout-api-formatting-context</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-layout-api-formatting-context">6.2.1. Determining Intrinsic Sizes</a>
    <li><a href="#ref-for-layout-api-formatting-context①">6.2.2. Generating Fragments</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-css-layoutworklet">
   <b><a href="#dom-css-layoutworklet">#dom-css-layoutworklet</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-css-layoutworklet">3. Layout Worklet</a> <a href="#ref-for-dom-css-layoutworklet①">(2)</a> <a href="#ref-for-dom-css-layoutworklet②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="layoutworkletglobalscope">
   <b><a href="#layoutworkletglobalscope">#layoutworkletglobalscope</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-layoutworkletglobalscope">3. Layout Worklet</a> <a href="#ref-for-layoutworkletglobalscope①">(2)</a>
    <li><a href="#ref-for-layoutworkletglobalscope②">3.1. Concepts</a>
    <li><a href="#ref-for-layoutworkletglobalscope③">3.2. Registering A Layout</a> <a href="#ref-for-layoutworkletglobalscope④">(2)</a>
    <li><a href="#ref-for-layoutworkletglobalscope⑤">4.1.1. LayoutChildren and the Box Tree</a> <a href="#ref-for-layoutworkletglobalscope⑥">(2)</a> <a href="#ref-for-layoutworkletglobalscope⑦">(3)</a>
    <li><a href="#ref-for-layoutworkletglobalscope⑧">6.2.1. Determining Intrinsic Sizes</a>
    <li><a href="#ref-for-layoutworkletglobalscope⑨">6.2.2. Generating Fragments</a>
    <li><a href="#ref-for-layoutworkletglobalscope①⓪">6.2.3. Global Scope Selection</a> <a href="#ref-for-layoutworkletglobalscope①①">(2)</a> <a href="#ref-for-layoutworkletglobalscope①②">(3)</a>
    <li><a href="#ref-for-layoutworkletglobalscope①③">6.2.4. Utility Algorithms</a> <a href="#ref-for-layoutworkletglobalscope①④">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="layout-definition">
   <b><a href="#layout-definition">#layout-definition</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-layout-definition">3.2. Registering A Layout</a>
    <li><a href="#ref-for-layout-definition①">6.2.4. Utility Algorithms</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="layout-definition-class-constructor">
   <b><a href="#layout-definition-class-constructor">#layout-definition-class-constructor</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-layout-definition-class-constructor">3.2. Registering A Layout</a>
    <li><a href="#ref-for-layout-definition-class-constructor①">6.2.4. Utility Algorithms</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="layout-definition-layout-function">
   <b><a href="#layout-definition-layout-function">#layout-definition-layout-function</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-layout-definition-layout-function">3.2. Registering A Layout</a>
    <li><a href="#ref-for-layout-definition-layout-function①">6.2.2. Generating Fragments</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="layout-definition-intrinsic-sizes-function">
   <b><a href="#layout-definition-intrinsic-sizes-function">#layout-definition-intrinsic-sizes-function</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-layout-definition-intrinsic-sizes-function">3.2. Registering A Layout</a>
    <li><a href="#ref-for-layout-definition-intrinsic-sizes-function①">6.2.1. Determining Intrinsic Sizes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="layout-definition-constructor-valid-flag">
   <b><a href="#layout-definition-constructor-valid-flag">#layout-definition-constructor-valid-flag</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-layout-definition-constructor-valid-flag">3.2. Registering A Layout</a>
    <li><a href="#ref-for-layout-definition-constructor-valid-flag①">6.2.4. Utility Algorithms</a> <a href="#ref-for-layout-definition-constructor-valid-flag②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="layout-definition-input-properties">
   <b><a href="#layout-definition-input-properties">#layout-definition-input-properties</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-layout-definition-input-properties">3.2. Registering A Layout</a>
    <li><a href="#ref-for-layout-definition-input-properties①">6.2.1. Determining Intrinsic Sizes</a>
    <li><a href="#ref-for-layout-definition-input-properties②">6.2.2. Generating Fragments</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="layout-definition-child-input-properties">
   <b><a href="#layout-definition-child-input-properties">#layout-definition-child-input-properties</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-layout-definition-child-input-properties">3.2. Registering A Layout</a>
    <li><a href="#ref-for-layout-definition-child-input-properties①">4.1. Layout Children</a> <a href="#ref-for-layout-definition-child-input-properties②">(2)</a>
    <li><a href="#ref-for-layout-definition-child-input-properties③">4.1.1. LayoutChildren and the Box Tree</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="layout-definition-layout-options">
   <b><a href="#layout-definition-layout-options">#layout-definition-layout-options</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-layout-definition-layout-options">3.2. Registering A Layout</a>
    <li><a href="#ref-for-layout-definition-layout-options①">6.2.2. Generating Fragments</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="document-layout-definition">
   <b><a href="#document-layout-definition">#document-layout-definition</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-document-layout-definition">3.2. Registering A Layout</a>
    <li><a href="#ref-for-document-layout-definition①">6.2.4. Utility Algorithms</a> <a href="#ref-for-document-layout-definition②">(2)</a> <a href="#ref-for-document-layout-definition③">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="document-layout-definition-input-properties">
   <b><a href="#document-layout-definition-input-properties">#document-layout-definition-input-properties</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-document-layout-definition-input-properties">3.2. Registering A Layout</a> <a href="#ref-for-document-layout-definition-input-properties①">(2)</a> <a href="#ref-for-document-layout-definition-input-properties②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="document-layout-definition-child-input-properties">
   <b><a href="#document-layout-definition-child-input-properties">#document-layout-definition-child-input-properties</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-document-layout-definition-child-input-properties">3.2. Registering A Layout</a> <a href="#ref-for-document-layout-definition-child-input-properties①">(2)</a>
    <li><a href="#ref-for-document-layout-definition-child-input-properties②">4.1.1. LayoutChildren and the Box Tree</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="document-layout-definition-layout-options">
   <b><a href="#document-layout-definition-layout-options">#document-layout-definition-layout-options</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-document-layout-definition-layout-options">2.2. Box Tree Transformations</a> <a href="#ref-for-document-layout-definition-layout-options①">(2)</a> <a href="#ref-for-document-layout-definition-layout-options②">(3)</a>
    <li><a href="#ref-for-document-layout-definition-layout-options③">3.2. Registering A Layout</a> <a href="#ref-for-document-layout-definition-layout-options④">(2)</a>
    <li><a href="#ref-for-document-layout-definition-layout-options⑤">4.5. Breaking and Fragmentation</a>
    <li><a href="#ref-for-document-layout-definition-layout-options⑥">5.1. Sizing</a> <a href="#ref-for-document-layout-definition-layout-options⑦">(2)</a> <a href="#ref-for-document-layout-definition-layout-options⑧">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dictdef-layoutoptions">
   <b><a href="#dictdef-layoutoptions">#dictdef-layoutoptions</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-layoutoptions">3.1. Concepts</a> <a href="#ref-for-dictdef-layoutoptions①">(2)</a>
    <li><a href="#ref-for-dictdef-layoutoptions②">3.2. Registering A Layout</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-layoutoptions-childdisplay">
   <b><a href="#dom-layoutoptions-childdisplay">#dom-layoutoptions-childdisplay</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-layoutoptions-childdisplay">2.2. Box Tree Transformations</a> <a href="#ref-for-dom-layoutoptions-childdisplay①">(2)</a> <a href="#ref-for-dom-layoutoptions-childdisplay②">(3)</a>
    <li><a href="#ref-for-dom-layoutoptions-childdisplay③">4.5. Breaking and Fragmentation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-layoutoptions-sizing">
   <b><a href="#dom-layoutoptions-sizing">#dom-layoutoptions-sizing</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-layoutoptions-sizing">4.4. Layout Constraints</a>
    <li><a href="#ref-for-dom-layoutoptions-sizing①">5.1. Sizing</a> <a href="#ref-for-dom-layoutoptions-sizing②">(2)</a> <a href="#ref-for-dom-layoutoptions-sizing③">(3)</a>
    <li><a href="#ref-for-dom-layoutoptions-sizing④">6.2.2. Generating Fragments</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="enumdef-childdisplaytype">
   <b><a href="#enumdef-childdisplaytype">#enumdef-childdisplaytype</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-enumdef-childdisplaytype">3.2. Registering A Layout</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="enumdef-layoutsizingmode">
   <b><a href="#enumdef-layoutsizingmode">#enumdef-layoutsizingmode</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-enumdef-layoutsizingmode">3.2. Registering A Layout</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="document-layout-definitions">
   <b><a href="#document-layout-definitions">#document-layout-definitions</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-document-layout-definitions">3.2. Registering A Layout</a>
    <li><a href="#ref-for-document-layout-definitions①">6.2.4. Utility Algorithms</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="layout-definitions">
   <b><a href="#layout-definitions">#layout-definitions</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-layout-definitions">3.2. Registering A Layout</a>
    <li><a href="#ref-for-layout-definitions①">6.2.4. Utility Algorithms</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="layout-class-instances">
   <b><a href="#layout-class-instances">#layout-class-instances</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-layout-class-instances">6.2.4. Utility Algorithms</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="stylemap">
   <b><a href="#stylemap">#stylemap</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-stylemap">3.2. Registering A Layout</a>
    <li><a href="#ref-for-stylemap①">6.2.4. Utility Algorithms</a> <a href="#ref-for-stylemap②">(2)</a> <a href="#ref-for-stylemap③">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-layoutworkletglobalscope-registerlayout">
   <b><a href="#dom-layoutworkletglobalscope-registerlayout">#dom-layoutworkletglobalscope-registerlayout</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-layoutworkletglobalscope-registerlayout">3. Layout Worklet</a>
    <li><a href="#ref-for-dom-layoutworkletglobalscope-registerlayout①">3.1. Concepts</a>
    <li><a href="#ref-for-dom-layoutworkletglobalscope-registerlayout②">3.2. Registering A Layout</a> <a href="#ref-for-dom-layoutworkletglobalscope-registerlayout③">(2)</a> <a href="#ref-for-dom-layoutworkletglobalscope-registerlayout④">(3)</a> <a href="#ref-for-dom-layoutworkletglobalscope-registerlayout⑤">(4)</a>
    <li><a href="#ref-for-dom-layoutworkletglobalscope-registerlayout⑥">6.2.4. Utility Algorithms</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="current-layout">
   <b><a href="#current-layout">#current-layout</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-current-layout">3.3. Terminology</a> <a href="#ref-for-current-layout①">(2)</a>
    <li><a href="#ref-for-current-layout②">4.1. Layout Children</a> <a href="#ref-for-current-layout③">(2)</a>
    <li><a href="#ref-for-current-layout④">4.2. Layout Fragments</a> <a href="#ref-for-current-layout⑤">(2)</a> <a href="#ref-for-current-layout⑥">(3)</a>
    <li><a href="#ref-for-current-layout⑦">4.3. Intrinsic Sizes</a> <a href="#ref-for-current-layout⑧">(2)</a>
    <li><a href="#ref-for-current-layout⑨">4.4. Layout Constraints</a> <a href="#ref-for-current-layout①⓪">(2)</a> <a href="#ref-for-current-layout①①">(3)</a> <a href="#ref-for-current-layout①②">(4)</a> <a href="#ref-for-current-layout①③">(5)</a> <a href="#ref-for-current-layout①④">(6)</a>
    <li><a href="#ref-for-current-layout①⑤">4.4.1. Constraints for Layout Children</a> <a href="#ref-for-current-layout①⑥">(2)</a> <a href="#ref-for-current-layout①⑦">(3)</a> <a href="#ref-for-current-layout①⑧">(4)</a> <a href="#ref-for-current-layout①⑨">(5)</a> <a href="#ref-for-current-layout②⓪">(6)</a>
    <li><a href="#ref-for-current-layout②①">5.1. Sizing</a>
    <li><a href="#ref-for-current-layout②②">5.4. Fragmentation</a>
    <li><a href="#ref-for-current-layout②③">6.1. Processing Model</a>
    <li><a href="#ref-for-current-layout②④">6.2. Performing Layout</a> <a href="#ref-for-current-layout②⑤">(2)</a>
    <li><a href="#ref-for-current-layout②⑥">6.2.4. Utility Algorithms</a> <a href="#ref-for-current-layout②⑦">(2)</a> <a href="#ref-for-current-layout②⑧">(3)</a> <a href="#ref-for-current-layout②⑨">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="parent-layout">
   <b><a href="#parent-layout">#parent-layout</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-parent-layout">4.4. Layout Constraints</a> <a href="#ref-for-parent-layout①">(2)</a> <a href="#ref-for-parent-layout②">(3)</a>
    <li><a href="#ref-for-parent-layout③">5.4. Fragmentation</a>
    <li><a href="#ref-for-parent-layout④">5.5. Alignment</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="child-layout">
   <b><a href="#child-layout">#child-layout</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-child-layout">4.4.1. Constraints for Layout Children</a>
    <li><a href="#ref-for-child-layout①">4.5. Breaking and Fragmentation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="layoutchild">
   <b><a href="#layoutchild">#layoutchild</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-layoutchild">2.2. Box Tree Transformations</a> <a href="#ref-for-layoutchild①">(2)</a>
    <li><a href="#ref-for-layoutchild②">3.3. Terminology</a>
    <li><a href="#ref-for-layoutchild③">4.1. Layout Children</a> <a href="#ref-for-layoutchild④">(2)</a> <a href="#ref-for-layoutchild⑤">(3)</a> <a href="#ref-for-layoutchild⑥">(4)</a> <a href="#ref-for-layoutchild⑦">(5)</a> <a href="#ref-for-layoutchild⑧">(6)</a> <a href="#ref-for-layoutchild⑨">(7)</a> <a href="#ref-for-layoutchild①⓪">(8)</a> <a href="#ref-for-layoutchild①①">(9)</a> <a href="#ref-for-layoutchild①②">(10)</a> <a href="#ref-for-layoutchild①③">(11)</a> <a href="#ref-for-layoutchild①④">(12)</a> <a href="#ref-for-layoutchild①⑤">(13)</a> <a href="#ref-for-layoutchild①⑥">(14)</a> <a href="#ref-for-layoutchild①⑦">(15)</a> <a href="#ref-for-layoutchild①⑧">(16)</a> <a href="#ref-for-layoutchild①⑨">(17)</a> <a href="#ref-for-layoutchild②⓪">(18)</a> <a href="#ref-for-layoutchild②①">(19)</a>
    <li><a href="#ref-for-layoutchild②②">4.1.1. LayoutChildren and the Box Tree</a> <a href="#ref-for-layoutchild②③">(2)</a> <a href="#ref-for-layoutchild②④">(3)</a> <a href="#ref-for-layoutchild②⑤">(4)</a>
    <li><a href="#ref-for-layoutchild②⑥">4.2. Layout Fragments</a> <a href="#ref-for-layoutchild②⑦">(2)</a> <a href="#ref-for-layoutchild②⑧">(3)</a>
    <li><a href="#ref-for-layoutchild②⑨">4.3. Intrinsic Sizes</a> <a href="#ref-for-layoutchild③⓪">(2)</a>
    <li><a href="#ref-for-layoutchild③①">4.4. Layout Constraints</a>
    <li><a href="#ref-for-layoutchild③②">4.4.1. Constraints for Layout Children</a>
    <li><a href="#ref-for-layoutchild③③">4.5. Breaking and Fragmentation</a> <a href="#ref-for-layoutchild③④">(2)</a> <a href="#ref-for-layoutchild③⑤">(3)</a> <a href="#ref-for-layoutchild③⑥">(4)</a>
    <li><a href="#ref-for-layoutchild③⑦">5.2. Positioning</a> <a href="#ref-for-layoutchild③⑧">(2)</a>
    <li><a href="#ref-for-layoutchild③⑨">5.5. Alignment</a>
    <li><a href="#ref-for-layoutchild④⓪">6.1. Processing Model</a>
    <li><a href="#ref-for-layoutchild④①">7. Examples</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-layoutchild-box-slot">
   <b><a href="#dom-layoutchild-box-slot">#dom-layoutchild-box-slot</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-layoutchild-box-slot">4.1. Layout Children</a> <a href="#ref-for-dom-layoutchild-box-slot①">(2)</a>
    <li><a href="#ref-for-dom-layoutchild-box-slot②">4.1.1. LayoutChildren and the Box Tree</a>
    <li><a href="#ref-for-dom-layoutchild-box-slot③">6.2.4. Utility Algorithms</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-layoutchild-stylemap-slot">
   <b><a href="#dom-layoutchild-stylemap-slot">#dom-layoutchild-stylemap-slot</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-layoutchild-stylemap-slot">4.1. Layout Children</a> <a href="#ref-for-dom-layoutchild-stylemap-slot①">(2)</a> <a href="#ref-for-dom-layoutchild-stylemap-slot②">(3)</a> <a href="#ref-for-dom-layoutchild-stylemap-slot③">(4)</a> <a href="#ref-for-dom-layoutchild-stylemap-slot④">(5)</a>
    <li><a href="#ref-for-dom-layoutchild-stylemap-slot⑤">4.1.1. LayoutChildren and the Box Tree</a> <a href="#ref-for-dom-layoutchild-stylemap-slot⑥">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-layoutchild-unique-id-slot">
   <b><a href="#dom-layoutchild-unique-id-slot">#dom-layoutchild-unique-id-slot</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-layoutchild-unique-id-slot">4.1. Layout Children</a> <a href="#ref-for-dom-layoutchild-unique-id-slot①">(2)</a>
    <li><a href="#ref-for-dom-layoutchild-unique-id-slot②">4.1.1. LayoutChildren and the Box Tree</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-layoutchild-stylemap">
   <b><a href="#dom-layoutchild-stylemap">#dom-layoutchild-stylemap</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-layoutchild-stylemap">4.1. Layout Children</a> <a href="#ref-for-dom-layoutchild-stylemap①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-layoutchild-intrinsicsizes">
   <b><a href="#dom-layoutchild-intrinsicsizes">#dom-layoutchild-intrinsicsizes</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-layoutchild-intrinsicsizes">4.1. Layout Children</a> <a href="#ref-for-dom-layoutchild-intrinsicsizes①">(2)</a>
    <li><a href="#ref-for-dom-layoutchild-intrinsicsizes②">6.2.4. Utility Algorithms</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-layoutchild-layoutnextfragment">
   <b><a href="#dom-layoutchild-layoutnextfragment">#dom-layoutchild-layoutnextfragment</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-layoutchild-layoutnextfragment">2.2. Box Tree Transformations</a>
    <li><a href="#ref-for-dom-layoutchild-layoutnextfragment①">4.1. Layout Children</a> <a href="#ref-for-dom-layoutchild-layoutnextfragment②">(2)</a> <a href="#ref-for-dom-layoutchild-layoutnextfragment③">(3)</a>
    <li><a href="#ref-for-dom-layoutchild-layoutnextfragment④">4.2. Layout Fragments</a> <a href="#ref-for-dom-layoutchild-layoutnextfragment⑤">(2)</a> <a href="#ref-for-dom-layoutchild-layoutnextfragment⑥">(3)</a> <a href="#ref-for-dom-layoutchild-layoutnextfragment⑦">(4)</a>
    <li><a href="#ref-for-dom-layoutchild-layoutnextfragment⑧">6.1. Processing Model</a>
    <li><a href="#ref-for-dom-layoutchild-layoutnextfragment⑨">6.2.4. Utility Algorithms</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-box-layoutchildmap-slot">
   <b><a href="#dom-box-layoutchildmap-slot">#dom-box-layoutchildmap-slot</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-box-layoutchildmap-slot">4.1.1. LayoutChildren and the Box Tree</a> <a href="#ref-for-dom-box-layoutchildmap-slot①">(2)</a> <a href="#ref-for-dom-box-layoutchildmap-slot②">(3)</a> <a href="#ref-for-dom-box-layoutchildmap-slot③">(4)</a> <a href="#ref-for-dom-box-layoutchildmap-slot④">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="get-a-layout-child">
   <b><a href="#get-a-layout-child">#get-a-layout-child</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-get-a-layout-child">4.1.1. LayoutChildren and the Box Tree</a>
    <li><a href="#ref-for-get-a-layout-child①">6.2.1. Determining Intrinsic Sizes</a>
    <li><a href="#ref-for-get-a-layout-child②">6.2.2. Generating Fragments</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="update-a-layout-child-style">
   <b><a href="#update-a-layout-child-style">#update-a-layout-child-style</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-update-a-layout-child-style">4.1.1. LayoutChildren and the Box Tree</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="layoutfragment">
   <b><a href="#layoutfragment">#layoutfragment</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-layoutfragment">2.2. Box Tree Transformations</a>
    <li><a href="#ref-for-layoutfragment①">4.1. Layout Children</a> <a href="#ref-for-layoutfragment②">(2)</a> <a href="#ref-for-layoutfragment③">(3)</a> <a href="#ref-for-layoutfragment④">(4)</a>
    <li><a href="#ref-for-layoutfragment⑤">4.2. Layout Fragments</a> <a href="#ref-for-layoutfragment⑥">(2)</a> <a href="#ref-for-layoutfragment⑦">(3)</a> <a href="#ref-for-layoutfragment⑧">(4)</a> <a href="#ref-for-layoutfragment⑨">(5)</a> <a href="#ref-for-layoutfragment①⓪">(6)</a> <a href="#ref-for-layoutfragment①①">(7)</a> <a href="#ref-for-layoutfragment①②">(8)</a> <a href="#ref-for-layoutfragment①③">(9)</a> <a href="#ref-for-layoutfragment①④">(10)</a> <a href="#ref-for-layoutfragment①⑤">(11)</a>
    <li><a href="#ref-for-layoutfragment①⑥">4.4. Layout Constraints</a> <a href="#ref-for-layoutfragment①⑦">(2)</a> <a href="#ref-for-layoutfragment①⑧">(3)</a>
    <li><a href="#ref-for-layoutfragment①⑨">4.4.1. Constraints for Layout Children</a>
    <li><a href="#ref-for-layoutfragment②⓪">4.5. Breaking and Fragmentation</a> <a href="#ref-for-layoutfragment②①">(2)</a> <a href="#ref-for-layoutfragment②②">(3)</a> <a href="#ref-for-layoutfragment②③">(4)</a>
    <li><a href="#ref-for-layoutfragment②④">6.1. Processing Model</a>
    <li><a href="#ref-for-layoutfragment②⑤">6.2. Performing Layout</a>
    <li><a href="#ref-for-layoutfragment②⑥">6.2.4. Utility Algorithms</a>
    <li><a href="#ref-for-layoutfragment②⑦">7. Examples</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-layoutfragment-inlinesize">
   <b><a href="#dom-layoutfragment-inlinesize">#dom-layoutfragment-inlinesize</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-layoutfragment-inlinesize">4.2. Layout Fragments</a> <a href="#ref-for-dom-layoutfragment-inlinesize①">(2)</a> <a href="#ref-for-dom-layoutfragment-inlinesize②">(3)</a>
    <li><a href="#ref-for-dom-layoutfragment-inlinesize③">6.2.4. Utility Algorithms</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-layoutfragment-blocksize">
   <b><a href="#dom-layoutfragment-blocksize">#dom-layoutfragment-blocksize</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-layoutfragment-blocksize">4.2. Layout Fragments</a> <a href="#ref-for-dom-layoutfragment-blocksize①">(2)</a> <a href="#ref-for-dom-layoutfragment-blocksize②">(3)</a>
    <li><a href="#ref-for-dom-layoutfragment-blocksize③">6.2.4. Utility Algorithms</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-layoutfragment-inlineoffset">
   <b><a href="#dom-layoutfragment-inlineoffset">#dom-layoutfragment-inlineoffset</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-layoutfragment-inlineoffset">4.2. Layout Fragments</a> <a href="#ref-for-dom-layoutfragment-inlineoffset①">(2)</a> <a href="#ref-for-dom-layoutfragment-inlineoffset②">(3)</a>
    <li><a href="#ref-for-dom-layoutfragment-inlineoffset③">5.2. Positioning</a> <a href="#ref-for-dom-layoutfragment-inlineoffset④">(2)</a>
    <li><a href="#ref-for-dom-layoutfragment-inlineoffset⑤">6.2.2. Generating Fragments</a>
    <li><a href="#ref-for-dom-layoutfragment-inlineoffset⑥">6.2.4. Utility Algorithms</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-layoutfragment-blockoffset">
   <b><a href="#dom-layoutfragment-blockoffset">#dom-layoutfragment-blockoffset</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-layoutfragment-blockoffset">4.2. Layout Fragments</a> <a href="#ref-for-dom-layoutfragment-blockoffset①">(2)</a> <a href="#ref-for-dom-layoutfragment-blockoffset②">(3)</a>
    <li><a href="#ref-for-dom-layoutfragment-blockoffset③">5.2. Positioning</a> <a href="#ref-for-dom-layoutfragment-blockoffset④">(2)</a>
    <li><a href="#ref-for-dom-layoutfragment-blockoffset⑤">6.2.2. Generating Fragments</a>
    <li><a href="#ref-for-dom-layoutfragment-blockoffset⑥">6.2.4. Utility Algorithms</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-layoutfragment-data">
   <b><a href="#dom-layoutfragment-data">#dom-layoutfragment-data</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-layoutfragment-data">4.2. Layout Fragments</a>
    <li><a href="#ref-for-dom-layoutfragment-data①">6.2.4. Utility Algorithms</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-layoutfragment-breaktoken">
   <b><a href="#dom-layoutfragment-breaktoken">#dom-layoutfragment-breaktoken</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-layoutfragment-breaktoken">4.2. Layout Fragments</a> <a href="#ref-for-dom-layoutfragment-breaktoken①">(2)</a> <a href="#ref-for-dom-layoutfragment-breaktoken②">(3)</a> <a href="#ref-for-dom-layoutfragment-breaktoken③">(4)</a> <a href="#ref-for-dom-layoutfragment-breaktoken④">(5)</a>
    <li><a href="#ref-for-dom-layoutfragment-breaktoken⑤">4.5. Breaking and Fragmentation</a>
    <li><a href="#ref-for-dom-layoutfragment-breaktoken⑥">6.2.4. Utility Algorithms</a>
    <li><a href="#ref-for-dom-layoutfragment-breaktoken⑦">7. Examples</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-layoutfragment-unique-id-slot">
   <b><a href="#dom-layoutfragment-unique-id-slot">#dom-layoutfragment-unique-id-slot</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-layoutfragment-unique-id-slot">6.2. Performing Layout</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="intrinsicsizes">
   <b><a href="#intrinsicsizes">#intrinsicsizes</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-intrinsicsizes">4.1. Layout Children</a>
    <li><a href="#ref-for-intrinsicsizes①">4.3. Intrinsic Sizes</a>
    <li><a href="#ref-for-intrinsicsizes②">6.2.4. Utility Algorithms</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-intrinsicsizes-mincontentsize">
   <b><a href="#dom-intrinsicsizes-mincontentsize">#dom-intrinsicsizes-mincontentsize</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-intrinsicsizes-mincontentsize">4.3. Intrinsic Sizes</a> <a href="#ref-for-dom-intrinsicsizes-mincontentsize①">(2)</a>
    <li><a href="#ref-for-dom-intrinsicsizes-mincontentsize②">6.2.4. Utility Algorithms</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-intrinsicsizes-maxcontentsize">
   <b><a href="#dom-intrinsicsizes-maxcontentsize">#dom-intrinsicsizes-maxcontentsize</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-intrinsicsizes-maxcontentsize">4.3. Intrinsic Sizes</a> <a href="#ref-for-dom-intrinsicsizes-maxcontentsize①">(2)</a>
    <li><a href="#ref-for-dom-intrinsicsizes-maxcontentsize②">6.2.4. Utility Algorithms</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="layoutconstraints">
   <b><a href="#layoutconstraints">#layoutconstraints</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-layoutconstraints">4.4. Layout Constraints</a> <a href="#ref-for-layoutconstraints①">(2)</a> <a href="#ref-for-layoutconstraints②">(3)</a> <a href="#ref-for-layoutconstraints③">(4)</a> <a href="#ref-for-layoutconstraints④">(5)</a> <a href="#ref-for-layoutconstraints⑤">(6)</a> <a href="#ref-for-layoutconstraints⑥">(7)</a> <a href="#ref-for-layoutconstraints⑦">(8)</a>
    <li><a href="#ref-for-layoutconstraints⑧">5.1. Sizing</a> <a href="#ref-for-layoutconstraints⑨">(2)</a>
    <li><a href="#ref-for-layoutconstraints①⓪">7. Examples</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-layoutconstraints-availableinlinesize">
   <b><a href="#dom-layoutconstraints-availableinlinesize">#dom-layoutconstraints-availableinlinesize</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-layoutconstraints-availableinlinesize">4.4. Layout Constraints</a> <a href="#ref-for-dom-layoutconstraints-availableinlinesize①">(2)</a> <a href="#ref-for-dom-layoutconstraints-availableinlinesize②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-layoutconstraints-availableblocksize">
   <b><a href="#dom-layoutconstraints-availableblocksize">#dom-layoutconstraints-availableblocksize</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-layoutconstraints-availableblocksize">4.4. Layout Constraints</a> <a href="#ref-for-dom-layoutconstraints-availableblocksize①">(2)</a> <a href="#ref-for-dom-layoutconstraints-availableblocksize②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-layoutconstraints-fixedinlinesize">
   <b><a href="#dom-layoutconstraints-fixedinlinesize">#dom-layoutconstraints-fixedinlinesize</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-layoutconstraints-fixedinlinesize">4.4. Layout Constraints</a> <a href="#ref-for-dom-layoutconstraints-fixedinlinesize①">(2)</a> <a href="#ref-for-dom-layoutconstraints-fixedinlinesize②">(3)</a> <a href="#ref-for-dom-layoutconstraints-fixedinlinesize③">(4)</a>
    <li><a href="#ref-for-dom-layoutconstraints-fixedinlinesize④">5.1. Sizing</a> <a href="#ref-for-dom-layoutconstraints-fixedinlinesize⑤">(2)</a> <a href="#ref-for-dom-layoutconstraints-fixedinlinesize⑥">(3)</a> <a href="#ref-for-dom-layoutconstraints-fixedinlinesize⑦">(4)</a>
    <li><a href="#ref-for-dom-layoutconstraints-fixedinlinesize⑧">5.1.1. Positioned layout sizing</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-layoutconstraints-fixedblocksize">
   <b><a href="#dom-layoutconstraints-fixedblocksize">#dom-layoutconstraints-fixedblocksize</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-layoutconstraints-fixedblocksize">4.4. Layout Constraints</a> <a href="#ref-for-dom-layoutconstraints-fixedblocksize①">(2)</a> <a href="#ref-for-dom-layoutconstraints-fixedblocksize②">(3)</a> <a href="#ref-for-dom-layoutconstraints-fixedblocksize③">(4)</a>
    <li><a href="#ref-for-dom-layoutconstraints-fixedblocksize④">5.1. Sizing</a> <a href="#ref-for-dom-layoutconstraints-fixedblocksize⑤">(2)</a> <a href="#ref-for-dom-layoutconstraints-fixedblocksize⑥">(3)</a> <a href="#ref-for-dom-layoutconstraints-fixedblocksize⑦">(4)</a>
    <li><a href="#ref-for-dom-layoutconstraints-fixedblocksize⑧">5.1.1. Positioned layout sizing</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-layoutconstraints-percentageinlinesize">
   <b><a href="#dom-layoutconstraints-percentageinlinesize">#dom-layoutconstraints-percentageinlinesize</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-layoutconstraints-percentageinlinesize">4.4. Layout Constraints</a> <a href="#ref-for-dom-layoutconstraints-percentageinlinesize①">(2)</a> <a href="#ref-for-dom-layoutconstraints-percentageinlinesize②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-layoutconstraints-percentageblocksize">
   <b><a href="#dom-layoutconstraints-percentageblocksize">#dom-layoutconstraints-percentageblocksize</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-layoutconstraints-percentageblocksize">4.4. Layout Constraints</a> <a href="#ref-for-dom-layoutconstraints-percentageblocksize①">(2)</a> <a href="#ref-for-dom-layoutconstraints-percentageblocksize②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-layoutconstraints-blockfragmentationoffset">
   <b><a href="#dom-layoutconstraints-blockfragmentationoffset">#dom-layoutconstraints-blockfragmentationoffset</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-layoutconstraints-blockfragmentationoffset">4.4. Layout Constraints</a>
    <li><a href="#ref-for-dom-layoutconstraints-blockfragmentationoffset①">5.4. Fragmentation</a> <a href="#ref-for-dom-layoutconstraints-blockfragmentationoffset②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-layoutconstraints-blockfragmentationtype">
   <b><a href="#dom-layoutconstraints-blockfragmentationtype">#dom-layoutconstraints-blockfragmentationtype</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-layoutconstraints-blockfragmentationtype">4.4. Layout Constraints</a> <a href="#ref-for-dom-layoutconstraints-blockfragmentationtype①">(2)</a>
    <li><a href="#ref-for-dom-layoutconstraints-blockfragmentationtype②">4.5. Breaking and Fragmentation</a>
    <li><a href="#ref-for-dom-layoutconstraints-blockfragmentationtype③">5.4. Fragmentation</a> <a href="#ref-for-dom-layoutconstraints-blockfragmentationtype④">(2)</a>
    <li><a href="#ref-for-dom-layoutconstraints-blockfragmentationtype⑤">7. Examples</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-layoutconstraints-data">
   <b><a href="#dom-layoutconstraints-data">#dom-layoutconstraints-data</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-layoutconstraints-data">4.4.1. Constraints for Layout Children</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="enumdef-blockfragmentationtype">
   <b><a href="#enumdef-blockfragmentationtype">#enumdef-blockfragmentationtype</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-enumdef-blockfragmentationtype">4.4. Layout Constraints</a>
    <li><a href="#ref-for-enumdef-blockfragmentationtype①">4.4.1. Constraints for Layout Children</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="create-a-layout-constraints-object">
   <b><a href="#create-a-layout-constraints-object">#create-a-layout-constraints-object</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-create-a-layout-constraints-object">4.4. Layout Constraints</a>
    <li><a href="#ref-for-create-a-layout-constraints-object①">6.2.2. Generating Fragments</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dictdef-layoutconstraintsoptions">
   <b><a href="#dictdef-layoutconstraintsoptions">#dictdef-layoutconstraintsoptions</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-layoutconstraintsoptions">4.1. Layout Children</a>
    <li><a href="#ref-for-dictdef-layoutconstraintsoptions①">4.4.1. Constraints for Layout Children</a> <a href="#ref-for-dictdef-layoutconstraintsoptions②">(2)</a> <a href="#ref-for-dictdef-layoutconstraintsoptions③">(3)</a>
    <li><a href="#ref-for-dictdef-layoutconstraintsoptions④">6.1. Processing Model</a>
    <li><a href="#ref-for-dictdef-layoutconstraintsoptions⑤">6.2.4. Utility Algorithms</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-layoutconstraintsoptions-availableinlinesize">
   <b><a href="#dom-layoutconstraintsoptions-availableinlinesize">#dom-layoutconstraintsoptions-availableinlinesize</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-layoutconstraintsoptions-availableinlinesize">4.4.1. Constraints for Layout Children</a> <a href="#ref-for-dom-layoutconstraintsoptions-availableinlinesize①">(2)</a> <a href="#ref-for-dom-layoutconstraintsoptions-availableinlinesize②">(3)</a> <a href="#ref-for-dom-layoutconstraintsoptions-availableinlinesize③">(4)</a> <a href="#ref-for-dom-layoutconstraintsoptions-availableinlinesize④">(5)</a> <a href="#ref-for-dom-layoutconstraintsoptions-availableinlinesize⑤">(6)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-layoutconstraintsoptions-availableblocksize">
   <b><a href="#dom-layoutconstraintsoptions-availableblocksize">#dom-layoutconstraintsoptions-availableblocksize</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-layoutconstraintsoptions-availableblocksize">4.4.1. Constraints for Layout Children</a> <a href="#ref-for-dom-layoutconstraintsoptions-availableblocksize①">(2)</a> <a href="#ref-for-dom-layoutconstraintsoptions-availableblocksize②">(3)</a> <a href="#ref-for-dom-layoutconstraintsoptions-availableblocksize③">(4)</a> <a href="#ref-for-dom-layoutconstraintsoptions-availableblocksize④">(5)</a> <a href="#ref-for-dom-layoutconstraintsoptions-availableblocksize⑤">(6)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-layoutconstraintsoptions-fixedinlinesize">
   <b><a href="#dom-layoutconstraintsoptions-fixedinlinesize">#dom-layoutconstraintsoptions-fixedinlinesize</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-layoutconstraintsoptions-fixedinlinesize">4.4.1. Constraints for Layout Children</a> <a href="#ref-for-dom-layoutconstraintsoptions-fixedinlinesize①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-layoutconstraintsoptions-fixedblocksize">
   <b><a href="#dom-layoutconstraintsoptions-fixedblocksize">#dom-layoutconstraintsoptions-fixedblocksize</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-layoutconstraintsoptions-fixedblocksize">4.4.1. Constraints for Layout Children</a> <a href="#ref-for-dom-layoutconstraintsoptions-fixedblocksize①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-layoutconstraintsoptions-percentageinlinesize">
   <b><a href="#dom-layoutconstraintsoptions-percentageinlinesize">#dom-layoutconstraintsoptions-percentageinlinesize</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-layoutconstraintsoptions-percentageinlinesize">4.4.1. Constraints for Layout Children</a> <a href="#ref-for-dom-layoutconstraintsoptions-percentageinlinesize①">(2)</a> <a href="#ref-for-dom-layoutconstraintsoptions-percentageinlinesize②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-layoutconstraintsoptions-percentageblocksize">
   <b><a href="#dom-layoutconstraintsoptions-percentageblocksize">#dom-layoutconstraintsoptions-percentageblocksize</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-layoutconstraintsoptions-percentageblocksize">4.4.1. Constraints for Layout Children</a> <a href="#ref-for-dom-layoutconstraintsoptions-percentageblocksize①">(2)</a> <a href="#ref-for-dom-layoutconstraintsoptions-percentageblocksize②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-layoutconstraintsoptions-data">
   <b><a href="#dom-layoutconstraintsoptions-data">#dom-layoutconstraintsoptions-data</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-layoutconstraintsoptions-data">4.4.1. Constraints for Layout Children</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="translate-a-layoutconstraintsoptions-to-internal-constraints">
   <b><a href="#translate-a-layoutconstraintsoptions-to-internal-constraints">#translate-a-layoutconstraintsoptions-to-internal-constraints</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-translate-a-layoutconstraintsoptions-to-internal-constraints">4.4.1. Constraints for Layout Children</a>
    <li><a href="#ref-for-translate-a-layoutconstraintsoptions-to-internal-constraints①">6.2.4. Utility Algorithms</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="childbreaktoken">
   <b><a href="#childbreaktoken">#childbreaktoken</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-childbreaktoken">4.1. Layout Children</a>
    <li><a href="#ref-for-childbreaktoken①">4.2. Layout Fragments</a>
    <li><a href="#ref-for-childbreaktoken②">4.5. Breaking and Fragmentation</a> <a href="#ref-for-childbreaktoken③">(2)</a> <a href="#ref-for-childbreaktoken④">(3)</a> <a href="#ref-for-childbreaktoken⑤">(4)</a> <a href="#ref-for-childbreaktoken⑥">(5)</a>
    <li><a href="#ref-for-childbreaktoken⑦">6.1. Processing Model</a>
    <li><a href="#ref-for-childbreaktoken⑧">6.2.4. Utility Algorithms</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="breaktoken">
   <b><a href="#breaktoken">#breaktoken</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-breaktoken">6.2.2. Generating Fragments</a>
    <li><a href="#ref-for-breaktoken①">7. Examples</a> <a href="#ref-for-breaktoken②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dictdef-breaktokenoptions">
   <b><a href="#dictdef-breaktokenoptions">#dictdef-breaktokenoptions</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-breaktokenoptions">6.2. Performing Layout</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-breaktokenoptions-childbreaktokens">
   <b><a href="#dom-breaktokenoptions-childbreaktokens">#dom-breaktokenoptions-childbreaktokens</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-breaktokenoptions-childbreaktokens">6.2. Performing Layout</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-breaktokenoptions-data">
   <b><a href="#dom-breaktokenoptions-data">#dom-breaktokenoptions-data</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-breaktokenoptions-data">6.2. Performing Layout</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="enumdef-breaktype">
   <b><a href="#enumdef-breaktype">#enumdef-breaktype</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-enumdef-breaktype">4.5. Breaking and Fragmentation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-childbreaktoken-unique-id-slot">
   <b><a href="#dom-childbreaktoken-unique-id-slot">#dom-childbreaktoken-unique-id-slot</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-childbreaktoken-unique-id-slot">6.2. Performing Layout</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="layoutedges">
   <b><a href="#layoutedges">#layoutedges</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-layoutedges">4.6. Edges</a> <a href="#ref-for-layoutedges①">(2)</a> <a href="#ref-for-layoutedges②">(3)</a> <a href="#ref-for-layoutedges③">(4)</a>
    <li><a href="#ref-for-layoutedges④">6.2.1. Determining Intrinsic Sizes</a>
    <li><a href="#ref-for-layoutedges⑤">6.2.2. Generating Fragments</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-layoutedges-inlinestart">
   <b><a href="#dom-layoutedges-inlinestart">#dom-layoutedges-inlinestart</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-layoutedges-inlinestart">4.6. Edges</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-layoutedges-inlineend">
   <b><a href="#dom-layoutedges-inlineend">#dom-layoutedges-inlineend</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-layoutedges-inlineend">4.6. Edges</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-layoutedges-blockstart">
   <b><a href="#dom-layoutedges-blockstart">#dom-layoutedges-blockstart</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-layoutedges-blockstart">4.6. Edges</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-layoutedges-blockend">
   <b><a href="#dom-layoutedges-blockend">#dom-layoutedges-blockend</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-layoutedges-blockend">4.6. Edges</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-layoutedges-inline">
   <b><a href="#dom-layoutedges-inline">#dom-layoutedges-inline</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-layoutedges-inline">4.6. Edges</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-layoutedges-block">
   <b><a href="#dom-layoutedges-block">#dom-layoutedges-block</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-layoutedges-block">4.6. Edges</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="layout-api-work-task">
   <b><a href="#layout-api-work-task">#layout-api-work-task</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-layout-api-work-task">4.1. Layout Children</a> <a href="#ref-for-layout-api-work-task①">(2)</a>
    <li><a href="#ref-for-layout-api-work-task②">6.1. Processing Model</a>
    <li><a href="#ref-for-layout-api-work-task③">6.2.4. Utility Algorithms</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="layout-api-work-task-layout-constraints">
   <b><a href="#layout-api-work-task-layout-constraints">#layout-api-work-task-layout-constraints</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-layout-api-work-task-layout-constraints">4.1. Layout Children</a>
    <li><a href="#ref-for-layout-api-work-task-layout-constraints①">6.2.4. Utility Algorithms</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="layout-api-work-task-layout-child">
   <b><a href="#layout-api-work-task-layout-child">#layout-api-work-task-layout-child</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-layout-api-work-task-layout-child">4.1. Layout Children</a> <a href="#ref-for-layout-api-work-task-layout-child①">(2)</a>
    <li><a href="#ref-for-layout-api-work-task-layout-child②">6.2.4. Utility Algorithms</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="layout-api-work-task-child-break-token">
   <b><a href="#layout-api-work-task-child-break-token">#layout-api-work-task-child-break-token</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-layout-api-work-task-child-break-token">4.1. Layout Children</a>
    <li><a href="#ref-for-layout-api-work-task-child-break-token①">6.2.4. Utility Algorithms</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="layout-api-work-task-task-type">
   <b><a href="#layout-api-work-task-task-type">#layout-api-work-task-task-type</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-layout-api-work-task-task-type">4.1. Layout Children</a> <a href="#ref-for-layout-api-work-task-task-type①">(2)</a>
    <li><a href="#ref-for-layout-api-work-task-task-type②">6.2.4. Utility Algorithms</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="layout-api-work-task-promise">
   <b><a href="#layout-api-work-task-promise">#layout-api-work-task-promise</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-layout-api-work-task-promise">4.1. Layout Children</a> <a href="#ref-for-layout-api-work-task-promise①">(2)</a>
    <li><a href="#ref-for-layout-api-work-task-promise②">6.2.4. Utility Algorithms</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="layout-api-context">
   <b><a href="#layout-api-context">#layout-api-context</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-layout-api-context">4.1. Layout Children</a> <a href="#ref-for-layout-api-context①">(2)</a> <a href="#ref-for-layout-api-context②">(3)</a>
    <li><a href="#ref-for-layout-api-context③">4.2. Layout Fragments</a>
    <li><a href="#ref-for-layout-api-context④">4.5. Breaking and Fragmentation</a>
    <li><a href="#ref-for-layout-api-context⑤">6.1. Processing Model</a>
    <li><a href="#ref-for-layout-api-context⑥">6.2. Performing Layout</a> <a href="#ref-for-layout-api-context⑦">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="layout-api-context-work-queue">
   <b><a href="#layout-api-context-work-queue">#layout-api-context-work-queue</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-layout-api-context-work-queue">4.1. Layout Children</a> <a href="#ref-for-layout-api-context-work-queue①">(2)</a>
    <li><a href="#ref-for-layout-api-context-work-queue②">6.1. Processing Model</a>
    <li><a href="#ref-for-layout-api-context-work-queue③">6.2.1. Determining Intrinsic Sizes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="layout-api-context-unique-id">
   <b><a href="#layout-api-context-unique-id">#layout-api-context-unique-id</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-layout-api-context-unique-id">4.1. Layout Children</a> <a href="#ref-for-layout-api-context-unique-id①">(2)</a> <a href="#ref-for-layout-api-context-unique-id②">(3)</a> <a href="#ref-for-layout-api-context-unique-id③">(4)</a>
    <li><a href="#ref-for-layout-api-context-unique-id④">4.2. Layout Fragments</a>
    <li><a href="#ref-for-layout-api-context-unique-id⑤">4.5. Breaking and Fragmentation</a>
    <li><a href="#ref-for-layout-api-context-unique-id⑥">6.1. Processing Model</a>
    <li><a href="#ref-for-layout-api-context-unique-id⑦">6.2. Performing Layout</a> <a href="#ref-for-layout-api-context-unique-id⑧">(2)</a>
    <li><a href="#ref-for-layout-api-context-unique-id⑨">6.2.1. Determining Intrinsic Sizes</a>
    <li><a href="#ref-for-layout-api-context-unique-id①⓪">6.2.2. Generating Fragments</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="layout-api-context-mode">
   <b><a href="#layout-api-context-mode">#layout-api-context-mode</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-layout-api-context-mode">4.1. Layout Children</a>
    <li><a href="#ref-for-layout-api-context-mode①">6.1. Processing Model</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="create-a-layout-api-context">
   <b><a href="#create-a-layout-api-context">#create-a-layout-api-context</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-create-a-layout-api-context">6.2.1. Determining Intrinsic Sizes</a>
    <li><a href="#ref-for-create-a-layout-api-context①">6.2.2. Generating Fragments</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dictdef-fragmentresultoptions">
   <b><a href="#dictdef-fragmentresultoptions">#dictdef-fragmentresultoptions</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-fragmentresultoptions">4.2. Layout Fragments</a>
    <li><a href="#ref-for-dictdef-fragmentresultoptions①">6.1. Processing Model</a>
    <li><a href="#ref-for-dictdef-fragmentresultoptions②">6.2. Performing Layout</a> <a href="#ref-for-dictdef-fragmentresultoptions③">(2)</a> <a href="#ref-for-dictdef-fragmentresultoptions④">(3)</a> <a href="#ref-for-dictdef-fragmentresultoptions⑤">(4)</a>
    <li><a href="#ref-for-dictdef-fragmentresultoptions⑥">6.2.2. Generating Fragments</a>
    <li><a href="#ref-for-dictdef-fragmentresultoptions⑦">7. Examples</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-fragmentresultoptions-inlinesize">
   <b><a href="#dom-fragmentresultoptions-inlinesize">#dom-fragmentresultoptions-inlinesize</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-fragmentresultoptions-inlinesize">6.2. Performing Layout</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-fragmentresultoptions-blocksize">
   <b><a href="#dom-fragmentresultoptions-blocksize">#dom-fragmentresultoptions-blocksize</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-fragmentresultoptions-blocksize">6.2. Performing Layout</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-fragmentresultoptions-autoblocksize">
   <b><a href="#dom-fragmentresultoptions-autoblocksize">#dom-fragmentresultoptions-autoblocksize</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-fragmentresultoptions-autoblocksize">6.2. Performing Layout</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-fragmentresultoptions-childfragments">
   <b><a href="#dom-fragmentresultoptions-childfragments">#dom-fragmentresultoptions-childfragments</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-fragmentresultoptions-childfragments">2.1. Layout API Container Painting</a>
    <li><a href="#ref-for-dom-fragmentresultoptions-childfragments①">5.5. Alignment</a>
    <li><a href="#ref-for-dom-fragmentresultoptions-childfragments②">6.2. Performing Layout</a> <a href="#ref-for-dom-fragmentresultoptions-childfragments③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-fragmentresultoptions-data">
   <b><a href="#dom-fragmentresultoptions-data">#dom-fragmentresultoptions-data</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-fragmentresultoptions-data">4.2. Layout Fragments</a>
    <li><a href="#ref-for-dom-fragmentresultoptions-data①">6.2. Performing Layout</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-fragmentresultoptions-breaktoken">
   <b><a href="#dom-fragmentresultoptions-breaktoken">#dom-fragmentresultoptions-breaktoken</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-fragmentresultoptions-breaktoken">6.2. Performing Layout</a>
    <li><a href="#ref-for-dom-fragmentresultoptions-breaktoken①">7. Examples</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="fragmentresult">
   <b><a href="#fragmentresult">#fragmentresult</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-fragmentresult">6.2. Performing Layout</a> <a href="#ref-for-fragmentresult①">(2)</a> <a href="#ref-for-fragmentresult②">(3)</a> <a href="#ref-for-fragmentresult③">(4)</a> <a href="#ref-for-fragmentresult④">(5)</a> <a href="#ref-for-fragmentresult⑤">(6)</a> <a href="#ref-for-fragmentresult⑥">(7)</a> <a href="#ref-for-fragmentresult⑦">(8)</a>
    <li><a href="#ref-for-fragmentresult⑧">6.2.2. Generating Fragments</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dictdef-intrinsicsizesresultoptions">
   <b><a href="#dictdef-intrinsicsizesresultoptions">#dictdef-intrinsicsizesresultoptions</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-intrinsicsizesresultoptions">6.2.1. Determining Intrinsic Sizes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-intrinsicsizesresultoptions-maxcontentsize">
   <b><a href="#dom-intrinsicsizesresultoptions-maxcontentsize">#dom-intrinsicsizesresultoptions-maxcontentsize</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-intrinsicsizesresultoptions-maxcontentsize">6.2.1. Determining Intrinsic Sizes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-intrinsicsizesresultoptions-mincontentsize">
   <b><a href="#dom-intrinsicsizesresultoptions-mincontentsize">#dom-intrinsicsizesresultoptions-mincontentsize</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-intrinsicsizesresultoptions-mincontentsize">6.2.1. Determining Intrinsic Sizes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-fragmentresult-box-slot">
   <b><a href="#dom-fragmentresult-box-slot">#dom-fragmentresult-box-slot</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-fragmentresult-box-slot">6.2. Performing Layout</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-fragmentresult-inline-size-slot">
   <b><a href="#dom-fragmentresult-inline-size-slot">#dom-fragmentresult-inline-size-slot</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-fragmentresult-inline-size-slot">6.2. Performing Layout</a> <a href="#ref-for-dom-fragmentresult-inline-size-slot①">(2)</a>
    <li><a href="#ref-for-dom-fragmentresult-inline-size-slot②">6.2.2. Generating Fragments</a> <a href="#ref-for-dom-fragmentresult-inline-size-slot③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-fragmentresult-block-size-slot">
   <b><a href="#dom-fragmentresult-block-size-slot">#dom-fragmentresult-block-size-slot</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-fragmentresult-block-size-slot">6.2. Performing Layout</a> <a href="#ref-for-dom-fragmentresult-block-size-slot①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-fragmentresult-child-fragments-slot">
   <b><a href="#dom-fragmentresult-child-fragments-slot">#dom-fragmentresult-child-fragments-slot</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-fragmentresult-child-fragments-slot">6.2. Performing Layout</a>
    <li><a href="#ref-for-dom-fragmentresult-child-fragments-slot①">6.2.2. Generating Fragments</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-fragmentresult-data-slot">
   <b><a href="#dom-fragmentresult-data-slot">#dom-fragmentresult-data-slot</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-fragmentresult-data-slot">6.2. Performing Layout</a>
    <li><a href="#ref-for-dom-fragmentresult-data-slot①">6.2.2. Generating Fragments</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-fragmentresult-internal-break-token-slot">
   <b><a href="#dom-fragmentresult-internal-break-token-slot">#dom-fragmentresult-internal-break-token-slot</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-fragmentresult-internal-break-token-slot">6.2. Performing Layout</a>
    <li><a href="#ref-for-dom-fragmentresult-internal-break-token-slot①">6.2.2. Generating Fragments</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-fragmentresult-unique-id-slot">
   <b><a href="#dom-fragmentresult-unique-id-slot">#dom-fragmentresult-unique-id-slot</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-fragmentresult-unique-id-slot">6.2. Performing Layout</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-fragmentresult-inlinesize">
   <b><a href="#dom-fragmentresult-inlinesize">#dom-fragmentresult-inlinesize</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-fragmentresult-inlinesize">6.2. Performing Layout</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-fragmentresult-blocksize">
   <b><a href="#dom-fragmentresult-blocksize">#dom-fragmentresult-blocksize</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-fragmentresult-blocksize">6.2. Performing Layout</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-fragmentresult-fragmentresult">
   <b><a href="#dom-fragmentresult-fragmentresult">#dom-fragmentresult-fragmentresult</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-fragmentresult-fragmentresult">6.2. Performing Layout</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="construct-a-fragment-result">
   <b><a href="#construct-a-fragment-result">#construct-a-fragment-result</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-construct-a-fragment-result">6.2. Performing Layout</a> <a href="#ref-for-construct-a-fragment-result①">(2)</a>
    <li><a href="#ref-for-construct-a-fragment-result②">6.2.2. Generating Fragments</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="determine-the-intrinsic-sizes">
   <b><a href="#determine-the-intrinsic-sizes">#determine-the-intrinsic-sizes</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-determine-the-intrinsic-sizes">3.2. Registering A Layout</a>
    <li><a href="#ref-for-determine-the-intrinsic-sizes①">6.2.1. Determining Intrinsic Sizes</a> <a href="#ref-for-determine-the-intrinsic-sizes②">(2)</a>
    <li><a href="#ref-for-determine-the-intrinsic-sizes③">6.2.4. Utility Algorithms</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="invoke-an-intrinsic-sizes-callback">
   <b><a href="#invoke-an-intrinsic-sizes-callback">#invoke-an-intrinsic-sizes-callback</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-invoke-an-intrinsic-sizes-callback">6.2.1. Determining Intrinsic Sizes</a> <a href="#ref-for-invoke-an-intrinsic-sizes-callback①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="generate-a-fragment">
   <b><a href="#generate-a-fragment">#generate-a-fragment</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-generate-a-fragment">3.2. Registering A Layout</a>
    <li><a href="#ref-for-generate-a-fragment①">6.2.2. Generating Fragments</a> <a href="#ref-for-generate-a-fragment②">(2)</a>
    <li><a href="#ref-for-generate-a-fragment③">6.2.4. Utility Algorithms</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="invoke-a-layout-callback">
   <b><a href="#invoke-a-layout-callback">#invoke-a-layout-callback</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-invoke-a-layout-callback">6.2.2. Generating Fragments</a> <a href="#ref-for-invoke-a-layout-callback①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="get-a-document-layout-definition">
   <b><a href="#get-a-document-layout-definition">#get-a-document-layout-definition</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-get-a-document-layout-definition">6.2.1. Determining Intrinsic Sizes</a> <a href="#ref-for-get-a-document-layout-definition①">(2)</a>
    <li><a href="#ref-for-get-a-document-layout-definition②">6.2.2. Generating Fragments</a> <a href="#ref-for-get-a-document-layout-definition③">(2)</a>
    <li><a href="#ref-for-get-a-document-layout-definition④">6.2.4. Utility Algorithms</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="get-a-layout-definition">
   <b><a href="#get-a-layout-definition">#get-a-layout-definition</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-get-a-layout-definition">4.1. Layout Children</a>
    <li><a href="#ref-for-get-a-layout-definition①">4.1.1. LayoutChildren and the Box Tree</a> <a href="#ref-for-get-a-layout-definition②">(2)</a>
    <li><a href="#ref-for-get-a-layout-definition③">6.2.1. Determining Intrinsic Sizes</a> <a href="#ref-for-get-a-layout-definition④">(2)</a>
    <li><a href="#ref-for-get-a-layout-definition⑤">6.2.2. Generating Fragments</a> <a href="#ref-for-get-a-layout-definition⑥">(2)</a>
    <li><a href="#ref-for-get-a-layout-definition⑦">6.2.4. Utility Algorithms</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="get-a-layout-class-instance">
   <b><a href="#get-a-layout-class-instance">#get-a-layout-class-instance</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-get-a-layout-class-instance">6.2.1. Determining Intrinsic Sizes</a> <a href="#ref-for-get-a-layout-class-instance①">(2)</a>
    <li><a href="#ref-for-get-a-layout-class-instance②">6.2.2. Generating Fragments</a> <a href="#ref-for-get-a-layout-class-instance③">(2)</a>
    <li><a href="#ref-for-get-a-layout-class-instance④">6.2.4. Utility Algorithms</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="get-a-style-map">
   <b><a href="#get-a-style-map">#get-a-style-map</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-get-a-style-map">6.2.1. Determining Intrinsic Sizes</a>
    <li><a href="#ref-for-get-a-style-map①">6.2.2. Generating Fragments</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="run-a-work-queue">
   <b><a href="#run-a-work-queue">#run-a-work-queue</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-run-a-work-queue">6.2.1. Determining Intrinsic Sizes</a> <a href="#ref-for-run-a-work-queue①">(2)</a>
    <li><a href="#ref-for-run-a-work-queue②">6.2.2. Generating Fragments</a> <a href="#ref-for-run-a-work-queue③">(2)</a>
    <li><a href="#ref-for-run-a-work-queue④">6.2.4. Utility Algorithms</a> <a href="#ref-for-run-a-work-queue⑤">(2)</a>
   </ul>
  </aside>
<script>/* script-var-click-highlighting */

    document.addEventListener("click", e=>{
        if(e.target.nodeName == "VAR") {
            highlightSameAlgoVars(e.target);
        }
    });
    {
        const indexCounts = new Map();
        const indexNames = new Map();
        function highlightSameAlgoVars(v) {
            // Find the algorithm container.
            let algoContainer = null;
            let searchEl = v;
            while(algoContainer == null && searchEl != document.body) {
                searchEl = searchEl.parentNode;
                if(searchEl.hasAttribute("data-algorithm")) {
                    algoContainer = searchEl;
                }
            }

            // Not highlighting document-global vars,
            // too likely to be unrelated.
            if(algoContainer == null) return;

            const algoName = algoContainer.getAttribute("data-algorithm");
            const varName = getVarName(v);
            const addClass = !v.classList.contains("selected");
            let highlightClass = null;
            if(addClass) {
                const index = chooseHighlightIndex(algoName, varName);
                indexCounts.get(algoName)[index] += 1;
                indexNames.set(algoName+"///"+varName, index);
                highlightClass = nameFromIndex(index);
            } else {
                const index = previousHighlightIndex(algoName, varName);
                indexCounts.get(algoName)[index] -= 1;
                highlightClass = nameFromIndex(index);
            }

            // Find all same-name vars, and toggle their class appropriately.
            for(const el of algoContainer.querySelectorAll("var")) {
                if(getVarName(el) == varName) {
                    el.classList.toggle("selected", addClass);
                    el.classList.toggle(highlightClass, addClass);
                }
            }
        }
        function getVarName(el) {
            return el.textContent.replace(/(\s| )+/, " ").trim();
        }
        function chooseHighlightIndex(algoName, varName) {
            let indexes = null;
            if(indexCounts.has(algoName)) {
                indexes = indexCounts.get(algoName);
            } else {
                // 7 classes right now
                indexes = [0,0,0,0,0,0,0];
                indexCounts.set(algoName, indexes);
            }

            // If the element was recently unclicked,
            // *and* that color is still unclaimed,
            // give it back the same color.
            const lastIndex = previousHighlightIndex(algoName, varName);
            if(indexes[lastIndex] === 0) return lastIndex;

            // Find the earliest index with the lowest count.
            const minCount = Math.min.apply(null, indexes);
            let index = null;
            for(var i = 0; i < indexes.length; i++) {
                if(indexes[i] == minCount) {
                    return i;
                }
            }
        }
        function previousHighlightIndex(algoName, varName) {
            return indexNames.get(algoName+"///"+varName);
        }
        function nameFromIndex(index) {
            return "selected" + index;
        }
    }
    </script>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
    var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
    // Find the dfn element or panel, if any, that was clicked on.
    var el = e.target;
    var target;
    var hitALink = false;
    while(el.parentElement) {
        if(el.tagName == "A") {
            // Clicking on a link in a <dfn> shouldn't summon the panel
            hitALink = true;
        }
        if(el.classList.contains("dfn-paneled")) {
            target = "dfn";
            break;
        }
        if(el.classList.contains("dfn-panel")) {
            target = "dfn-panel";
            break;
        }
        el = el.parentElement;
    }
    if(target != "dfn-panel") {
        // Turn off any currently "on" or "activated" panels.
        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
            el.classList.remove("on");
            el.classList.remove("activated");
        });
    }
    if(target == "dfn" && !hitALink) {
        // open the panel
        var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
        if(dfnPanel) {
            dfnPanel.classList.add("on");
            var rect = el.getBoundingClientRect();
            dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
            dfnPanel.style.top = window.scrollY + rect.top + "px";
            var panelRect = dfnPanel.getBoundingClientRect();
            var panelWidth = panelRect.right - panelRect.left;
            if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                // Reposition, because the panel is overflowing
                dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
            }
        } else {
            console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
        }
    } else if(target == "dfn-panel") {
        // Switch it to "activated" state, which pins it.
        el.classList.add("activated");
        el.style.left = null;
        el.style.top = null;
    }

});
</script>